Layer on click event not firing in Firefox but working fine in Chrome,Edge

1373
2
Jump to solution
07-09-2018 03:23 AM
Abdul_AzizMuhammad_Abdul_Majid
New Contributor II

Hi, This is my first time asking in community.

I am using ESRI JS API 3.24 in my application.

I am using following code to open specific URL within the application when click on the layer.

var lyrUrl = "Path_To_Layer";
var myLyr = new FeatureLayer(lyrUrl, {
 id: "some_id",
 mode: 1,
 outFields: ['ID', 'Name_English']
});

//Code for the specific URL to open in a new window
myLyr.on("click", function(evt) {
 var enName = myLyr._downGr.attributes.Name_English;
 window.open('main/' + enName + '/index.html');
});

The issue is that the click event is working fine in chrome, Edge but not in Firefox. i mean not working is that when click on the layer, the link open in new page/tab but in Firefox, nothing happen at all. Can someone help me in this? Thanks.

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Abdul,

   This works fine for me in FireFox.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
<script src="https://js.arcgis.com/3.25/"></script>

<style>
html, body, #map {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>

<script>
require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "dojo/domReady!"
  ],
  function(
    Map,
    FeatureLayer
  ) {

    var map = new Map("map", {
      basemap: "hybrid",
      center: [-82.44109, 35.6122],
      zoom: 17
    });

    /****************************************************************
     * Add feature layer - A FeatureLayer at minimum should point
     * to a URL to a feature service or point to a feature collection 
     * object.
     ***************************************************************/

    // Carbon storage of trees in Warren Wilson College.
    var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0", {
      outFields: ['*']
    });

    map.addLayer(featureLayer);
    
    featureLayer.on("click", function(evt) {
      var enName = evt.graphic.attributes.Spp_Code;
      window.open('main/' + enName + '/index.html');
    });

  });
</script>
</head>

<body>
  <div id="map"></div>
</body>

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

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

Abdul,

   This works fine for me in FireFox.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
<script src="https://js.arcgis.com/3.25/"></script>

<style>
html, body, #map {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>

<script>
require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "dojo/domReady!"
  ],
  function(
    Map,
    FeatureLayer
  ) {

    var map = new Map("map", {
      basemap: "hybrid",
      center: [-82.44109, 35.6122],
      zoom: 17
    });

    /****************************************************************
     * Add feature layer - A FeatureLayer at minimum should point
     * to a URL to a feature service or point to a feature collection 
     * object.
     ***************************************************************/

    // Carbon storage of trees in Warren Wilson College.
    var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0", {
      outFields: ['*']
    });

    map.addLayer(featureLayer);
    
    featureLayer.on("click", function(evt) {
      var enName = evt.graphic.attributes.Spp_Code;
      window.open('main/' + enName + '/index.html');
    });

  });
</script>
</head>

<body>
  <div id="map"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Abdul_AzizMuhammad_Abdul_Majid
New Contributor II

Hey Robert Scheitlin, GISPits very strange behavior of FF. It seems that now its working fine. Thanks for the answer.

0 Kudos