Good morning. Is there a way to include a function in a popup that re-directs a user to another page? I have code to create the content of the popup, from a function, but I need to include another function within that code...in an anchor tag, like this...<a href="#" onclick="redirect();return false;">Click here</a>. I keep getting redirect is undefined. if I do not include the function in quotes, then the function is evaluated when the content of the popup window is created...not on click. Any ideas? Thanks...Chris
Solved! Go to Solution.
Hi Christopher,
I've done this before by adding a button to the pop-up. You can use dom.byId to listen for a click event and then fire a function. Ex:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Sample Map</title> <!--<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">--> <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css"> <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } </style> <script src="http://js.arcgis.com/3.12/"></script> <script> var map; require([ "esri/map", "esri/layers/FeatureLayer", "esri/dijit/PopupTemplate", "dojo/dom", "dojo/on", "dojo/_base/array", "dijit/form/Button", "dojo/domReady!" ], function( Map, FeatureLayer, PopupTemplate, dom, on, array, Button ) { map = new Map("mapDiv", { basemap: "streets", center: [-81.792107, 26.150807], zoom: 8 }); var template = new PopupTemplate(); template.setTitle("<b>City</b>"); template.setContent(getContent); on(map.infoWindow, "show", function(){ on(dom.byId("button"), "click", function(){ var win = window.open("http://www.esri.com", '_blank'); win.focus(); }); }) function getContent(graphic){ var Content = "<b>City Name: </b>" + graphic.attributes.areaname + "<br> <b>Population: </b>" + graphic.attributes.pop2000 + "<br>"; var Hyperlink = "<button id='button' dojoType='dijit.form.Button'>Redirect</button>"; return Content + Hyperlink; } var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",{ mode: FeatureLayer.MODE_ONDEMAND, infoTemplate: template, outFields: ["*"] }); map.addLayer(featureLayer); }); </script> </head> <body> <div id="mapDiv"></div> </body> </html>
Hi Christopher,
I've done this before by adding a button to the pop-up. You can use dom.byId to listen for a click event and then fire a function. Ex:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Sample Map</title> <!--<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">--> <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css"> <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } </style> <script src="http://js.arcgis.com/3.12/"></script> <script> var map; require([ "esri/map", "esri/layers/FeatureLayer", "esri/dijit/PopupTemplate", "dojo/dom", "dojo/on", "dojo/_base/array", "dijit/form/Button", "dojo/domReady!" ], function( Map, FeatureLayer, PopupTemplate, dom, on, array, Button ) { map = new Map("mapDiv", { basemap: "streets", center: [-81.792107, 26.150807], zoom: 8 }); var template = new PopupTemplate(); template.setTitle("<b>City</b>"); template.setContent(getContent); on(map.infoWindow, "show", function(){ on(dom.byId("button"), "click", function(){ var win = window.open("http://www.esri.com", '_blank'); win.focus(); }); }) function getContent(graphic){ var Content = "<b>City Name: </b>" + graphic.attributes.areaname + "<br> <b>Population: </b>" + graphic.attributes.pop2000 + "<br>"; var Hyperlink = "<button id='button' dojoType='dijit.form.Button'>Redirect</button>"; return Content + Hyperlink; } var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",{ mode: FeatureLayer.MODE_ONDEMAND, infoTemplate: template, outFields: ["*"] }); map.addLayer(featureLayer); }); </script> </head> <body> <div id="mapDiv"></div> </body> </html>
Thanks, Jake. I will give it a try.
Thanks, Jake!!!
This works using just an anchor tag/link too, by the way.
Thanks again.
- Chris