Capture click on link within Popup to session?

GrantRussell1 · ‎10-23-2012

Hi All,

New to this ArgGis system.

We have a map that has a collection of location points on it. If the user clicks on a point, a popup of information shows. We would like to include in this popup a "Add to request" link.

If a user clicks on this "Add to request" the ID for the location would be saved to the session....

The user may click on multiple points and have multiple requests saved to the session.

Then we would include a "Fill out details" link, that would take the user away from the Map to a page we would create that would have the saved point ID's passed to it.

We would like to do this with Javascript or Jquery.

We have been having a preliminary play with this. We have included a link with an ID in the popup. But we are having difficulty getting the ID of the link to the jquery, as it is not included in the passed map on the page.

Any thoughts or a better way of doing this?

Cheers

Livetech

__Rich_ · ‎10-23-2012

When you say "popup" do you mean Popup or do you mean InfoWindow?

The former has properties that will give you easy access to the current feature of interest and thus it's attributes, from that point it's just bog standard programming, nothing JS API specific, to send whatever values you need back to the server for persistence.

You can do it with the latter too, just thought the 'easier' functionality of the Popup might be more appealing based on your post.

Not the only way (and not necessarily how I'd do it) but here's a sample containing some functionality that might nudge you towards an approach:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/find_drilldown.html

(based on InfoWindow but high-level workflow is the same)

GrantRussell1 · ‎10-23-2012

Many thanks for the reply geos_rfleet,

We are using Pop-ups, but these have already been created. And are shown on the map that we have included in our test html page.

Within the created popup is a link with an ID (id ="request_17"). It is this ID we want to capture, when a user clicks on this......

__Rich_ · ‎10-23-2012

Within the created popup is a link with an ID (id ="request_17"). It is this ID we want to capture, when a user clicks on this......

What have you got so far? (where are you stuck? Perhaps a code snippet would help)

In that sample I can see:

<a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(show)</a>

From what you've said, you have a similar bit of HTML that you're injecting into your Popup, correct?

GrantRussell1 · ‎10-23-2012

Hi geos_rfleet 🙂

OK, we have the following in our html test page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
    <!--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>
      Full Map Layout
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    <script type="text/javascript" src="http://www.livefx.co.uk/clients/arcmap/jquery.min.js"></script>
    <style type="text/css">
      html,body {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }

      body {
        background-color:#777;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }

      #map {
        overflow:hidden;
        padding:0;
      }
    </style>
    <script type="text/javascript">
      var dojoConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.IdentityManager");
      dojo.require("esri.arcgis.utils");
        
      var map;

      function init() {
        esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications. 
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      
        var urlObject = esri.urlToObject(document.location.href);
        var webmap = "d4caa59aec804e928da942f9a69d372b";
        var bingMapsKey ="/*Please enter your own Bing Map key*/";
        if (urlObject.query) {
          webmap = urlObject.query.webmap;
          bingMapsKey = urlObject.query.bingMapsKey;
        }
        
        var mapDeferred = esri.arcgis.utils.createMap(webmap, "map", {
          mapOptions: {
            slider: false,
            nav:false
          },
          bingMapsKey: bingMapsKey,
          geometryServiceURL: "http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"
        });
        mapDeferred.addCallback(function(response) {
          map = response.map;
          //resize the map when the browser resizes
          //alert("dfdf");
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
          $(document).ready(jQueryReady);

        });
        mapDeferred.addErrback(function(error) {
          console.log("Map creation failed: ", dojo.toJson(error));
        });
      }

      function resizeMap() {
        //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in 
        //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
        var resizeTimer;
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
        }, 500);
      }
     
      function jQueryReady(){
       
      $('#request_17').click(function() {
            alert("sdsfdfdfdgfg");
        });
      }
     $('#request_17').click(function() {

 alert("sdsfdfdfdgfg");
 
 
});
      //show map on load
      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" 
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
        <div id="bingLogo" style="position: absolute;bottom: 2px;left: 3px;display:none;z-index:49;">
          <img src="images/bing_logo.png" border="0" />
        </div>
      </div>
    </div>
  </body>

</html>

The map that we are using has pop-ups already in place, and we have a link in some of them for testing as follows (the purple points on the map)

<a href="javascript:void(0)" id="request_17">Add to Request list</a>

So, we are not generating popups in our test page, we are trying to interact with existing popups in the map.

Will have a go with seeing what options are available for the JS in the link itself maybe...

__Rich_ · ‎10-23-2012

Ahhh, you're working with web maps - that's quite a crucial piece of information.

According to the documentation getting hold of the layers would be through:

mapDeferred.then(function(response) {
    map = response.map;
    dojo.forEach(response.itemInfo.itemData.operationalLayers,function(layer){
        //Do something with the layer here
    });
});

Actually, having played with it a bit, you can probably get hold of the layers and their templates once you have instantiated your local map in the 'usual' way. (no idea if this approach is recommended or not)

Either way, it looks like getting hold of the objects you need is pretty straightforward.

GrantRussell1 · ‎10-23-2012

Ahhh, you're working with web maps - that's quite a crucial piece of information.

So getting hold of the PopupTemplates for the layers would be through:
var layers = response.itemInfo.itemData.operationalLayers;

Erm, sorry not to mention that...... Ah, edited - will have a look through that 🙂

Many thanks

GrantRussell1 · ‎10-23-2012

...Either way, it looks like getting hold of the objects you need is pretty straightforward.

Can you point me in the right direction of how to do this?

KellyHutchins · ‎10-23-2012

We have a sample in the help that shows how to add a new link to a popup. Here's the sample:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/gp_popuplink.html

KellyHutchins · ‎10-23-2012

Meant to also point out the following code in the sample I sent. The line below provides access to the current popup feature.

map.infoWindow.getSelectedFeature();