topic Re: How to modify InfoTemplate content dynamically when it's displayed in ArcGIS JavaScript Maps SDK Questions

How to modify InfoTemplate content dynamically when it's displayed

YohanBienvenue — Tue, 08 May 2012 14:54:42 GMT

Hi,

I have several feature layers in my map, and each of them have graphics that when clicked display a different InfoTemplate.
I saw that whenever a popup is displayed, the <div class="esriPopup"> element's content is updated with the correct infoTemplate content (depending on the graphic clicked).
Now, I'd like to be able to dynamically edit this content when the popup is displayed, for instance maybe do things like that:

$(".esriPopup").find(".popup-button").on("vmousedown", function(){ // do things }); // popup button onclick

but to do this I need to know when the DOM has finished updating

TLDR: Is there any ArcGIS for Javascript API event I could bind to so that I could execute some of my code when a popup is displayed?

Thanks

Re: How to modify InfoTemplate content dynamically when it's displayed

TomJacoby — Sat, 11 Dec 2021 08:20:50 GMT

Something like this?

map.graphics.enableMouseEvents();
dojo.connect(map.graphics, "onClick", function(evt) {
   // Set your events on the pop up as you want
});

I am not sure exactly when this is fired in comparison to the info popup opening, but I would start here and see if it suits your needs. In this example I set the entire content of the popup on graphic click, and it functioned well, but it was a simple example.

Re: How to modify InfoTemplate content dynamically when it's displayed

YohanBienvenue — Sat, 11 Dec 2021 08:20:53 GMT

Something like this?
map.graphics.enableMouseEvents();
dojo.connect(map.graphics, "onClick", function(evt) {
   // Set your events on the pop up as you want
});
I am not sure exactly when this is fired in comparison to the info popup opening, but I would start here and see if it suits your needs. In this example I set the entire content of the popup on graphic click, and it functioned well, but it was a simple example.

Thanks for the inspiration Tom. Your solution and a few others I attempted after this post didn't work. In fact I ended up trying pretty complex solutions (e.g. mutation events) before I stopped what I was doing and remembered the KISS principle. Taking a few steps back, I realized that what I was trying to avoid is have some unique HTML content for every single InfoTemplate (one per layer), I wanted a one fits all solution. I also wanted to avoid coding a onclick handler for my custom button directly in this HTML (I haven't used static handlers like that for ages). Therefore I resisted the idea, but it does seem to be the simplest solution, so I think I'll go with that.

Something like this, one content per layer:

// InfoTemplate content
<div id="layer-conduitAqueduc-popup" style="display: none;">
   <table class="popup-table">
      <tbody>
         <tr><td>Identifiant</td><td class="right-align">${IdCondt}</td></tr>
      </tbody>
   </table>
   <br />
   <div data-role="button" data-mini="true" onclick="_Layer.onInspectionClick(Couche.CONDUIT_D_AQUEDUC);">Inspection</div>
</div>

This should be x-browser too.