Select to view content in your preferred language

Add button to infoWindow to pass graphic to another function

2963
1
Jump to solution
05-05-2012 08:56 AM
JayGregory
Occasional Contributor
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
0 Kudos
1 Solution

Accepted Solutions
JayGregory
Occasional Contributor
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"); }

View solution in original post

0 Kudos
1 Reply
JayGregory
Occasional Contributor
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"); }
0 Kudos