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... Click here . 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

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: Sample Map html, body, #mapDiv { padding:0; margin:0; height:100%; } 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(" City "); 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 = " City Name: " + graphic.attributes.areaname + " Population: " + graphic.attributes.pop2000 + " "; var Hyperlink = " Redirect "; 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); });

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Function in a popup

ChristopherJohnson1

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

Encuentra más publicaciones etiquetadas con

Accepted answers

jskinner

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>

All comments

ChristopherJohnson1

Thanks, Jake!!!

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

Thanks again.

- Chris

ChristopherJohnson1

Thanks, Jake. I will give it a try.

jskinner

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>

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.