attach event listener to html element within standard esri popup

906
3
11-26-2012 02:08 PM
DerekMiller
New Contributor III
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
0 Kudos
3 Replies
__Rich_
Occasional Contributor III
Unfortunately, I cannot connect to the element within the popup via ID or Class. Any thoughts?

What's not working?  (what have you tried?)
0 Kudos
DerekMiller
New Contributor III
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
0 Kudos
DerekMiller
New Contributor III


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
0 Kudos