topic Re: Close Dialog Popup on Hyperlink Click in ArcGIS JavaScript Maps SDK Questions

Close Dialog Popup on Hyperlink Click

deleted-user-1_r2dgYuILKY — Sat, 11 Dec 2021 06:09:15 GMT

I have a dialog popup with a hyperlink. I want the popup to close when the link is clicked. I've tried "nboLink.on("click", closeDialog);" but the console says that this is not a function. Here is my code:

Layer.on("click", function(evt){
            var name = evt.graphic.attributes.NAME;
            var nameNoDot = name.replace(/\./g,"");
            var nameDash = nameNoDot.replace(/_/g, "-");
            var nameLower = nameDash.toLowerCase();
           
            
          var nboLink = "<b>${NAME}</b><hr><a target='_blank' href='http://website/profiles/" + nameLower +
              "'><b>Profile</b></a>";
                   
          var popupContent = esriLang.substitute(evt.graphic.attributes,nboLink);
            
          dialog.setContent(popupContent);

          domStyle.set(dialog.domNode, "opacity", 0.70);
            
          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY,
          });
     
          function closeDialog(){
               map.graphics.clear();
               dijitPopup.close(dialog);
               };
               
          
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Close Dialog Popup on Hyperlink Click

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:09:18 GMT

Levi,

Have you tried just adding an onClick to your anchor element?

var nboLink = "<b>${NAME}</b><hr><a target='_blank' onClick='closeDialog' href='http://website/profiles/" + nameLower +
 "'><b>Profile</b></a>";‍‍

Re: Close Dialog Popup on Hyperlink Click

deleted-user-1_r2dgYuILKY — Thu, 10 Aug 2017 20:59:03 GMT

I added that and got this error in the console: "closeDialog is not defined at HTMLAnchorElement.onclick." I tried moving the closeDialog() function definition before the nboLink and got the same error.

Re: Close Dialog Popup on Hyperlink Click

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:09:21 GMT

Levi,

That sounds like a scope issue then. Try this:

        Layer.on("click", function(evt){
            var name = evt.graphic.attributes.NAME;
            var nameNoDot = name.replace(/\./g,"");
            var nameDash = nameNoDot.replace(/_/g, "-");
            var nameLower = nameDash.toLowerCase();
           
            
          var nboLink = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://website/profiles/" + nameLower +
              "'><b>Profile</b></a>";
                   
          var popupContent = esriLang.substitute(evt.graphic.attributes,nboLink);
            
          dialog.setContent(popupContent);

          on(dom.byId("myLink"),"click", closeDialog);

          domStyle.set(dialog.domNode, "opacity", 0.70);
            
          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY,
          });
     
          function closeDialog(){
               map.graphics.clear();
               dijitPopup.close(dialog);
               };
               
          
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Close Dialog Popup on Hyperlink Click

deleted-user-1_r2dgYuILKY — Thu, 10 Aug 2017 21:35:53 GMT

OK. I tired that and got this error: Cannot read property 'on' of null.

Re: Close Dialog Popup on Hyperlink Click

RobertScheitlin__GISP — Thu, 10 Aug 2017 23:48:31 GMT

Levi can you provide a complete sample of this issue?

Re: Close Dialog Popup on Hyperlink Click

deleted-user-1_r2dgYuILKY — Sat, 11 Dec 2021 06:09:25 GMT

Here's the whole script:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Neighborhood Pulse</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      margin: 0;
      font-family: "Open Sans";
    }

    #leftPane {
      background-color: whitesmoke;
      width: 20%;
      border: solid 1px #000;
    }
     
     #photoPane {
      background-color: whitesmoke;
      width: 20%;
      border: solid 1px #000;
       //bottom: 700px;
       height: 65%;
    }
     

    #map {
      padding: 0;
       border: solid 1px #000;
    }

    .nav {
      padding: 5px 10px;
      background: #4479BA;
      color: #FFF;
      border-radius: 5px;
      border: solid 1px #20538D;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    }

    #header {
      text-align: center;
      height: 8%;
      border: solid 1px #000;
       background-color: whitesmoke;
       font-size: 19;
    }
     
     #HomeButton {
      position: absolute;
      top: 95px;
      left: 245px;
      z-index: 50;
    }
     
     #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 290px;
      }

    .dijitDialogPaneContent {
      width: 200px !important;
      height: 100px !important;
    }
  </style>

  <script src="https://js.arcgis.com/3.21/"></script>
  <script>
    var map, timer;
    require([
      "esri/lang",
      "dojo/on",
      "dojo/dom",
      "dijit/registry",
      "dojo/dom-construct",
      "dojo/dom-style",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "esri/layers/FeatureLayer",
      "esri/dijit/PopupTemplate",
       "esri/dijit/HomeButton",
      "esri/dijit/Search",
       "esri/dijit/BasemapGallery",
       "esri/graphic",
      "dijit/layout/ContentPane",
      "esri/map",
      "esri/arcgis/utils",
      "esri/domUtils",
       "dijit/TooltipDialog",
      "esri/dijit/Popup",
      "dijit/popup",
      "dijit/Dialog",
      "dojo/domReady!"
    ], function(
      esriLang,
      on,
      dom,
      registry,
      domConstruct,
      domStyle,
      parser,
      BorderContainer,
      FeatureLayer,
      PopupTemplate,
       HomeButton, 
       Search,
       BasemapGallery,
       Graphic,
      ContentPane,
      Map,
      arcgisUtils,
      domUtils,
       TooltipDialog,
      Popup,
      dijitPopup,
      Dialog
    ) {
      parser.parse();

      map = new Map("map", {
        showLabels: false,
        basemap: "gray",
        center: [-122.650, 45.52],
        zoom: 11
      });
       
       var home = new HomeButton({
          map: map
         }, "HomeButton");
         home.startup();
           
           var search = new Search({
            map: map,
               showInfoWindowOnSelect: false,
               enableLabel: false,
               enableHighlight: false
         }, "search");
         search.startup();
           

      var template = new PopupTemplate({
        title: "{NAME}",
        description: "<b>White Population</b>: {WhiteAlone_not_Hisp}" +
          "<br><b>Total Population 2010</b>: {TotPOP_2010}" +
          "<br><b>Neighborhood Coalition</b>: {LABEL_NAME_COALITION}"
      });
          
      var neighborhoodsLayer = new FeatureLayer(
        "http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/MapServer/29", {
          infoTemplate: template,
          outFields: ["*"],
            maxScale: 0,
            minScale: 0,
            opacity: .60
            
        });
      map.addLayer(neighborhoodsLayer);

      on(neighborhoodsLayer, "mouse-over", function(evt) {
        clearTimeout(timer);
        displayPopupContent(evt.graphic);
      });

      on(neighborhoodsLayer, "mouse-out", function(evt) {
        timer = setTimeout(function() {
          map.infoWindow.clearFeatures();
        }, 100)
      });

      map.infoWindow.set("popupWindow", false);
      initializeSidebar(map);

      function initializeSidebar(map) {
        var popup = map.infoWindow;
        //when the selection changes update the side panel to display the popup info for the
        //currently selected feature.
        on(popup, "selection-change", function() {
          displayPopupContent(popup.getSelectedFeature());
        });

        //When features are associated with the  map's info window update the sidebar with the new content.
        on(popup, "set-features", function() {
          displayPopupContent(popup.getSelectedFeature());
          
        });
      }
          
     
      function displayPopupContent(feature){
            
        if (feature) {
          
            var photoSRC = "https://images.trvl-media.com/media/content/shared/images/travelguides/destination/178299/Portland-20917.jpg"; 
            var photo = '<a><IMG SRC="' + photoSRC + '"width=200 height=125/></a>';
            var content = feature.getContent();
          registry.byId("leftPane").set("content",content,photo);
            registry.byId("photoPane").set("content",photo);
        }
          
          dialog = new TooltipDialog({
          style: "position: absolute; width: 200px; font: normal normal normal 10pt Arial;z-index:100"
        });
        
          
          neighborhoodsLayer.on("click", function(evt){
            var name = evt.graphic.attributes.NAME;
            var nameNoDot = name.replace(/\./g,"");
            var nameDash = nameNoDot.replace(/_/g, "-");
            var nameLower = nameDash.toLowerCase();
           
            
          var nboLink = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://neighborhoodpulsepdx.org/profiles/" + nameLower +
              "'><b>Profile</b></a>";
                   
          var popupContent = esriLang.substitute(evt.graphic.attributes,nboLink);
            
          dialog.setContent(popupContent);

          //on(dom.byId("myLink"),"click", closeDialog);

          domStyle.set(dialog.domNode, "opacity", 0.70);
            
          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY,
          });
     
          function closeDialog(){
               map.graphics.clear();
               dijitPopup.close(dialog);
               };
               
          
        });
          
          
          
          
     
      }       
       

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
  
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" region="left" style="width:225px;height:100%;font-size:13;">
      <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
       <div id="photoPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'"></div>
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style= "width:200px;height:10%;">
        <div id="featureCount" style="margin-bottom:10px;"><b>Portland<br>Neighborhoods</b></div>
      </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
     <div id="search"></div>
             
             <span id="info" style="font-family:arial;position:absolute;left:250px; bottom:5px; background-color:lightgray; opacity: 0.70; z-index:50;"></span>
             
             <div id="HomeButton"></div>
             
          <div style="position:absolute; left:250px; bottom:40px; z-Index:999;">
          
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Close Dialog Popup on Hyperlink Click

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:09:29 GMT

Levi,

Here is your code working. Your issue was you were recreating the TooltipDialog digit multiple time based on its placement in your code and the on function had to be after the TooltipDialog was opened so that the dom.byId could find the anchor tag:

dialog<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Neighborhood Pulse</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      margin: 0;
      font-family: "Open Sans";
    }

    #leftPane {
      background-color: whitesmoke;
      width: 20%;
      border: solid 1px #000;
    }

    #photoPane {
      background-color: whitesmoke;
      width: 20%;
      border: solid 1px #000; //bottom: 700px;
      height: 65%;
    }


    #map {
      padding: 0;
      border: solid 1px #000;
    }

    .nav {
      padding: 5px 10px;
      background: #4479BA;
      color: #FFF;
      border-radius: 5px;
      border: solid 1px #20538D;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    }

    #header {
      text-align: center;
      height: 8%;
      border: solid 1px #000;
      background-color: whitesmoke;
      font-size: 19;
    }

    #HomeButton {
      position: absolute;
      top: 95px;
      left: 245px;
      z-index: 50;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 290px;
    }

    .dijitDialogPaneContent {
      width: 200px !important;
      height: 100px !important;
    }
  </style>

  <script src="https://js.arcgis.com/3.21/"></script>
  <script>
    var map, timer;
    require([
      "esri/lang",
      "dojo/on",
      "dojo/dom",
      "dijit/registry",
      "dojo/dom-construct",
      "dojo/dom-style",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "esri/layers/FeatureLayer",
      "esri/dijit/PopupTemplate",
      "esri/dijit/HomeButton",
      "esri/dijit/Search",
      "esri/dijit/BasemapGallery",
      "esri/graphic",
      "dijit/layout/ContentPane",
      "esri/map",
      "esri/arcgis/utils",
      "esri/domUtils",
      "dijit/TooltipDialog",
      "esri/dijit/Popup",
      "dijit/popup",
      "dijit/Dialog",
      "dojo/domReady!"
    ], function(
      esriLang,
      on,
      dom,
      registry,
      domConstruct,
      domStyle,
      parser,
      BorderContainer,
      FeatureLayer,
      PopupTemplate,
      HomeButton,
      Search,
      BasemapGallery,
      Graphic,
      ContentPane,
      Map,
      arcgisUtils,
      domUtils,
      TooltipDialog,
      Popup,
      dijitPopup,
      Dialog
    ) {
      parser.parse();
      map = new Map("map", {
        showLabels: false,
        basemap: "gray",
        center: [-122.650, 45.52],
        zoom: 11
      });

      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

      var search = new Search({
        map: map,
        showInfoWindowOnSelect: false,
        enableLabel: false,
        enableHighlight: false
      }, "search");
      search.startup();

      var template = new PopupTemplate({
        title: "{NAME}",
        description: "<b>White Population</b>: {WhiteAlone_not_Hisp}" +
          "<br><b>Total Population 2010</b>: {TotPOP_2010}" +
          "<br><b>Neighborhood Coalition</b>: {LABEL_NAME_COALITION}"
      });

      var neighborhoodsLayer = new FeatureLayer(
        "http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/MapServer/29", {
          infoTemplate: template,
          outFields: ["*"],
          maxScale: 0,
          minScale: 0,
          opacity: .60

        });
      map.addLayer(neighborhoodsLayer);

      on(neighborhoodsLayer, "mouse-over", function(evt) {
        clearTimeout(timer);
        displayPopupContent(evt.graphic);
      });

      on(neighborhoodsLayer, "mouse-out", function(evt) {
        timer = setTimeout(function() {
          map.infoWindow.clearFeatures();
        }, 100)
      });

      map.infoWindow.set("popupWindow", false);
      initializeSidebar(map);

      dialog  = new TooltipDialog({
        style: "position: absolute; width: 200px; font: normal normal normal 10pt Arial;z-index:100"
      });

      function initializeSidebar(map) {
        var popup = map.infoWindow;
        //when the selection changes update the side panel to display the popup info for the
        //currently selected feature.
        on(popup, "selection-change", function() {
          displayPopupContent(popup.getSelectedFeature());
        });

        //When features are associated with the  map's info window update the sidebar with the new content.
        on(popup, "set-features", function() {
          displayPopupContent(popup.getSelectedFeature());
        });
      }

      function displayPopupContent(feature) {
        if (feature) {
          var photoSRC = "https://images.trvl-media.com/media/content/shared/images/travelguides/destination/178299/Portland-20917.jpg";
          var photo = '<a><IMG SRC="' + photoSRC + '"width=200 height=125/></a>';
          var content = feature.getContent();
          registry.byId("leftPane").set("content", content, photo);
          registry.byId("photoPane").set("content", photo);
        }

        neighborhoodsLayer.on("click", function(evt) {
          var name = evt.graphic.attributes.NAME;
          var nameNoDot = name.replace(/\./g, "");
          var nameDash = nameNoDot.replace(/_/g, "-");
          var nameLower = nameDash.toLowerCase();

          var nboLink = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://neighborhoodpulsepdx.org/profiles/" + nameLower +
            "'><b>Profile</b></a>";

          var popupContent = esriLang.substitute(evt.graphic.attributes, nboLink);

          dialog .setContent(popupContent);
          domStyle.set(dialog .domNode, "opacity", 0.70);

          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY
          });
          on(dom.byId("myLink"),"click", closeDialog);

          function closeDialog () {
            map.graphics.clear();
            dijitPopup.close(dialog);
          };
        });
      }
    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" region="left" style="width:225px;height:100%;font-size:13;">
      <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="photoPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'"></div>
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="width:200px;height:10%;">
        <div id="featureCount" style="margin-bottom:10px;"><b>Portland<br>Neighborhoods</b></div>
      </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
    <div id="search"></div>
    <span id="info" style="font-family:arial;position:absolute;left:250px; bottom:5px; background-color:lightgray; opacity: 0.70; z-index:50;"></span>
    <div id="HomeButton"></div>
    <div style="position:absolute; left:250px; bottom:40px; z-Index:999;">
    </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Close Dialog Popup on Hyperlink Click

deleted-user-1_r2dgYuILKY — Mon, 14 Aug 2017 15:56:47 GMT

Thanks Robert!

Re: Close Dialog Popup on Hyperlink Click

KenBuja — Mon, 14 Aug 2017 16:00:15 GMT

Nice reply, Robert.

I have one question about adding the event. Since you're adding this event every time the layer is clicked, would this be a potential memory leak? Would it be better to fire that event just once?

on.once(dom.byId("myLink"),"click", closeDialog);‍

Re: Close Dialog Popup on Hyperlink Click

deleted-user-1_r2dgYuILKY — Thu, 04 Jan 2018 17:56:10 GMT

I'm revisiting this thread with a similar question. Would it be possible to close a popup after clicking on a linked attachment in a feature layer?

Re: Close Dialog Popup on Hyperlink Click

RobertScheitlin__GISP — Thu, 04 Jan 2018 18:29:00 GMT

Levi,

I'm confused is that not what we are doing now?..

Re: Close Dialog Popup on Hyperlink Click

deleted-user-1_r2dgYuILKY — Sat, 11 Dec 2021 06:09:32 GMT

The difference is this is a basic feature layer popup with attachment. No hyperlink with DOM ID.

var popup = new Popup(popupOptions, domConstruct.create("div"));
               
               
            var popupTemplate = new PopupTemplate({
           title: "Storm: {name}",
     
            showAttachments:true
          });‍‍‍‍‍‍‍‍

Re: Close Dialog Popup on Hyperlink Click

RobertScheitlin__GISP — Thu, 04 Jan 2018 19:21:57 GMT

Levi,

It is possible. You would have to link to the popup show event and then use dojo query to find the attribute link class and assign a click event to that dom object that will do map.infoWindow.hide();