topic Add button to infoWindow to pass graphic to another function in ArcGIS JavaScript Maps SDK Questions

Add button to infoWindow to pass graphic to another function

JayGregory — Sat, 05 May 2012 15:56:41 GMT

I'm trying to add a button to an infoWindow - when the button is clicked, it should pass the graphic to the supporting function. Everything works but the graphic isn't passed...

function twitterPopup(evt){     var graphic = evt.graphic;   var attr = graphic.attributes;   var newDate = (attr.created_at).replace('+0000', 'UTC');   var content = '';   if (attr.profile_image_url) {         content = '<a class="twImage" href="http://twitter.com/' + attr.from_user + '" target="_blank"><img class="shadow" src="' +    attr.profile_image_url + '" width="48" height="48"></a>';   }  content += '<p>' + replaceURLWithLinks(attr.text) + '</p>';  content += '<div class="clear"></div><ul class="iwContentList"><li><b>Location:</b> (' + attr.geo.coordinates + ')</li><li><b>Created:</b> ' + newDate + '</li></ul></div><br/>';  content += '<div align="center"> <input value="Add to Database" id = "add" type="button" onClick="addTwitterToDatabase(this.graphic)"></input></div>'  var title = attr.from_user + " tweets&hellip;";     map.infoWindow.resize(300,230);     map.infoWindow.setTitle(title);     dojo.byId('infoWindowContents').innerHTML = content;     $('#infoWindowContents a').each( function() {         $(this).attr('target', '_BLANK');     });     esri.show(dojo.byId("infoWindowContents"));  var screenPoint = evt.screenPoint;     map.infoWindow.show(evt.graphic.geometry, map.getInfoWindowAnchor(screenPoint)); }

Does anyone have any suggestions? I've tried passing graphic, and this.graphic, but the passed parameter remained undefined in the addTwitterToDatabase function. As it the function isn't passing anything at all....

Thanks, Jay

Re: Add button to infoWindow to pass graphic to another function

JayGregory — Sun, 06 May 2012 14:28:29 GMT

So I figured out how to do this - in case anyone wants to know. It's pretty straightforward -
1. Create a placeholder for the button in the content of the infoWindow.

content += '<div align="center"> <button id = "addTweetButton" type="button"></button></div>'

2. Add a button to the placeholder by referencing the id.

var button = new dijit.form.Button({         label: "Add to Database",         onClick: function(){             addTwitterToDatabase(graphic);         }     }, "addTweetButton");

Here is the full code - worked like a charm!

function twitterPopup(evt){   hideAll();   graphic = evt.graphic;   var attr = graphic.attributes;   var newDate = (attr.created_at).replace('+0000', 'UTC');   var content = '';   if (attr.profile_image_url) {         content = '<a class="twImage" href="http://twitter.com/' + attr.from_user + '" target="_blank"><img class="shadow" src="' +    attr.profile_image_url + '" width="48" height="48"></a>';   }  content += '<p>' + replaceURLWithLinks(attr.text) + '</p>';  content += '<div class="clear"></div><ul class="iwContentList"><li><b>Location:</b> (' + attr.geo.coordinates + ')</li><li><b>Created:</b> ' + newDate + '</li></ul></div><br/>';  content += '<div align="center"> <button id = "addTweetButton" type="button"></button></div>'  var title = attr.from_user + " tweets&hellip;";     map.infoWindow.resize(300,230);     map.infoWindow.setTitle(title);     dojo.byId('infoWindowContents').innerHTML = content;     /*Open all links in a new window*/     $('#infoWindowContents a').each( function() {         $(this).attr('target', '_BLANK');     });     esri.show(dojo.byId("infoWindowContents"));  var screenPoint = evt.screenPoint;     map.infoWindow.show(evt.graphic.geometry, map.getInfoWindowAnchor(screenPoint));  var button = new dijit.form.Button({         label: "Add to Database",         onClick: function(){             addTwitterToDatabase(graphic);         }     }, "addTweetButton"); }