topic attach event listener to html element within standard esri popup in ArcGIS JavaScript Maps SDK Questions

attach event listener to html element within standard esri popup

DerekMiller — Mon, 26 Nov 2012 22:08:27 GMT

Hello all,

I would like to attach an event listener to an html element within a popup window. I'm basically trying to mimic the maximize button. However, I want to have more control, and therefore intend to attach the listener to a custom function and dojo animation.

Unfortunately, I cannot connect to the element within the popup via ID or Class. Any thoughts?

Thanks,

- d

Re: attach event listener to html element within standard esri popup

__Rich_ — Tue, 27 Nov 2012 07:41:43 GMT

Unfortunately, I cannot connect to the element within the popup via ID or Class. Any thoughts?

What's not working? (what have you tried?)

Re: attach event listener to html element within standard esri popup

DerekMiller — Sun, 12 Dec 2021 06:42:54 GMT

What's not working? (what have you tried?)

Thanks for the response. Should have included a few things that had not worked.

First, the popup template that is creating the html element:

popupTemplate = new esri.dijit.PopupTemplate({
          title: "{building_name}",
          //description: "<h4>{building_name}</h4><hr/>{Short_Desc}",
          description: "{Short_Desc}"+"</br><div id='expandoPopLink' data-dojo-type='dijit.form.Button'></div>",
          mediaInfos: [{
            "type": "image",
            "value": {
              "sourceURL": "{image_path}",
              "linkURL": "{image_path}"
            }
          }]
        });

Note the the element has also been tested as an empty <div> (no dijit.form.Button), and also as a <span> with a class .expandoPopLink.

Next, the event handlers that have been tried, also note that I did not try all these at once....

expandoPopLink = document.getElementById("expandoPopLink");
       
       expandoPopLink = dojo.byId('expandoPopLink');
       
       expandoPopLink.click = function() {
         alert("turkey");
       }
       
       dojo.connect(".expandoPopLink", "onClick", function() {
         alert("this works");
       });
       
       expandoPopLink = dojo.query(".expandoPopLink")[0];
       expandoPopLink = document.getElementById("expandoPop");
       console.log(expandoPopLink);
       dojo.connect(expandoPopLink, "onClick", function() {
         alert("turkey");
       });
       expandoPopLink.click = function() {
         alert("turkey");
       }
       
       dojo.connect(dijit.byId("expandoPopLink"), "onClick", function() {
         console.log("button in popup clicked");
         alert("turkey");
       });

I've been told by another source that it's DOM methods only within the popup. I'll be testing but I look forward to your thoughts.

Thanks again,

- d

Re: attach event listener to html element within standard esri popup

DerekMiller — Tue, 27 Nov 2012 16:08:50 GMT

I've been told by another source that it's DOM methods only within the popup.

- d

Using the same popupTemplate as posted above, I declared expandoPopLink as so:

expandoPopLink = document.getElementById("expandoPopLink");

then connected the event listener like this:

dojo.connect(expandoPopLink, "onclick", derek);

And the function fires. Don't know why the anonymous function route didn't fire as I expected, but this seems to work.

Still interested in any thoughts you might have. I'd like to make this application as smooth as possible.

Thanks again,

- d