Function in a popup

ChristopherJohnson1 — Wed, 04 May 2016 11:08:12 GMT

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

Re: Function in a popup

JakeSkinner — Sun, 12 Dec 2021 03:09:18 GMT

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>

Re: Function in a popup

ChristopherJohnson1 — Wed, 04 May 2016 18:32:50 GMT

Thanks, Jake. I will give it a try.

Re: Function in a popup

ChristopherJohnson1 — Wed, 04 May 2016 20:57:10 GMT

Thanks, Jake!!!

This works using just an anchor tag/link too, by the way.

Thanks again.

- Chris

topic Re: Function in a popup in ArcGIS JavaScript Maps SDK Questions

Function in a popup

Re: Function in a popup

Re: Function in a popup

Re: Function in a popup