White space in attributes

ShawnRoberts1 · ‎05-14-2019

I've got a popup on a map that when you click a custom button on the popup it passes some parameters to another function for processing. For the purpose of this question though I've simplified the button to just write to the console.

These parameters are attributes that come from the layer map. The problem I'm experiencing is some of these attributes have white space in them so I can't pass them into the function without getting an error. I know this is more of a JS problem not really a JS API problem but just seeing if anyone has found a way around this issue before.

var popupViewDetailsButton = "<button class='button popupButton' id='viewDetailsPopupButton' onclick=console.log('{Transaction_Type}')>ViewDetails</button>";

For example the transaction type above could be "For Sale" or "For Lease".

When it tries to write to the console I get an "Invalid or unexpected token" console.log('For .... where it has stopped after the first space.

I've tried something like {Transaction_Type}.replace(' ','_') but that doesn't seem to work either. I can't change the values on the server side, and I've also tried to encode the value again neither have worked.

Any guidance or assistance would be greatly appreciated!

RobertScheitlin__GISP · ‎05-14-2019

Shawn,

Hmm.. Seems like a bug. Here is a workaround though:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>ERROR TESTING</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.10/"></script>
  <script>
    require([
      "esri/Map", "esri/views/MapView", 'esri/layers/FeatureLayer', 'esri/PopupTemplate',
      "dojo/dom", "dojo/on", "esri/core/watchUtils"], function (Map,
      MapView, FeatureLayer, PopupTemplate, dom, on, watchUtils) {

      pointLayerUrl =
        'https://utility.arcgis.com/usrsvcs/servers/1ef8d2605f5544b79bc34b7b363a7979/rest/services/Development/DEVRealEstateListing/MapServer/0'

      var popupImage =
        "<div class ='popupImageContainer'><a href ={ThumbnailURL} target='_blank'><img src={ThumbnailURL} onerror=this.src='images/Padlock.png' class='popupImage'></a></div>";

      var popupText =
      "<div class ='popupText'>List Price: ${List_Price}<br>Sale Type: {Transaction_Type}<br></div>";

      var popupViewDetailsButton =
        "<button class='button popupButton' id='viewDetailsPopupButton'>ViewDetails</button>";

      var popupContent = popupImage + popupText + popupViewDetailsButton;

      var template = {
        title: "{FullAddress}",
        content: popupContent
      };

      var pointLayer = new FeatureLayer({
        url: pointLayerUrl,
        definitionExpression: "1=1",
        outFields: ['ThumbnailURL', 'List_Price', 'Transaction_Type'],
        popupTemplate: template
      });

      var map = new Map({
        basemap: 'topo',
        layers: [pointLayer]
      });
      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 10,
        center: [-80.599567, 44.399800],
      });

      view.popup.watch('selectedFeature', function(evt){
        if(evt){
          setTimeout(function(){
            on(dom.byId("viewDetailsPopupButton"),'click', function(evt){
              console.info(view.popup.selectedFeature.attributes.Transaction_Type);
            });
          }, 200);
        }
      });
    });
  </script>
</head>

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

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

View solution in original post

RobertScheitlin__GISP · ‎05-14-2019

Shawn,

What your describing is strange can you provide a full code sample that exhibits this behavior?

ShawnRoberts1 · ‎05-14-2019

Hi Robert, thanks for the reply. I've uploaded a very stripped down and simplified version I was testing on to try to isolate the problem. Everything is in one file, no css or really that much Js going on in this version.

I've noticed if I use one of the fields that I know has no spaces in it (ThumbnailUrl for example) it works perfectly, but if I set it up to log transaction _type (or any other attribute with a space in it) I get that error.

To get the error just open a popup and select view details.

Thanks!

---------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ERROR TESTING</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require(["esri/Map", "esri/views/MapView", 'esri/layers/FeatureLayer', 'esri/PopupTemplate'], function(Map, MapView, FeatureLayer, PopupTemplate) {

pointLayerUrl = 'https://utility.arcgis.com/usrsvcs/servers/1ef8d2605f5544b79bc34b7b363a7979/rest/services/Development/DEVRealEstateListing/MapServer/0'

var popupImage = "<div class ='popupImageContainer'><a href ={ThumbnailURL} target='_blank'><img src={ThumbnailURL} onerror=this.src='rescources/internal/img/NoImage.png' class='popupImage'></a></div>";

var popupText = "<div class ='popupText'>List Price: ${List_Price}<br>Sale Type: {Transaction_Type}<br></div>";

var popupViewDetailsButton = "<button class='button popupButton' id='viewDetailsPopupButton' onclick=console.log('{Transaction_Type}')>ViewDetails</button>";

var popupContent = popupImage + popupText + popupViewDetailsButton;

var template = {
title: "{FullAddress}",
content: popupContent
};

var pointLayer = new FeatureLayer({
url: pointLayerUrl,
definitionExpression: "1=1",
outFields: ['ThumbnailURL', 'List_Price', 'Transaction_Type',],
popupTemplate: template
});

var map = new Map({
basemap: 'topo',
layers: [pointLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 10,
center: [-80.599567, 44.399800],
});
});
</script>
</head>

RobertScheitlin__GISP · ‎05-14-2019

Shawn,

Hmm.. Seems like a bug. Here is a workaround though:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>ERROR TESTING</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.10/"></script>
  <script>
    require([
      "esri/Map", "esri/views/MapView", 'esri/layers/FeatureLayer', 'esri/PopupTemplate',
      "dojo/dom", "dojo/on", "esri/core/watchUtils"], function (Map,
      MapView, FeatureLayer, PopupTemplate, dom, on, watchUtils) {

      pointLayerUrl =
        'https://utility.arcgis.com/usrsvcs/servers/1ef8d2605f5544b79bc34b7b363a7979/rest/services/Development/DEVRealEstateListing/MapServer/0'

      var popupImage =
        "<div class ='popupImageContainer'><a href ={ThumbnailURL} target='_blank'><img src={ThumbnailURL} onerror=this.src='images/Padlock.png' class='popupImage'></a></div>";

      var popupText =
      "<div class ='popupText'>List Price: ${List_Price}<br>Sale Type: {Transaction_Type}<br></div>";

      var popupViewDetailsButton =
        "<button class='button popupButton' id='viewDetailsPopupButton'>ViewDetails</button>";

      var popupContent = popupImage + popupText + popupViewDetailsButton;

      var template = {
        title: "{FullAddress}",
        content: popupContent
      };

      var pointLayer = new FeatureLayer({
        url: pointLayerUrl,
        definitionExpression: "1=1",
        outFields: ['ThumbnailURL', 'List_Price', 'Transaction_Type'],
        popupTemplate: template
      });

      var map = new Map({
        basemap: 'topo',
        layers: [pointLayer]
      });
      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 10,
        center: [-80.599567, 44.399800],
      });

      view.popup.watch('selectedFeature', function(evt){
        if(evt){
          setTimeout(function(){
            on(dom.byId("viewDetailsPopupButton"),'click', function(evt){
              console.info(view.popup.selectedFeature.attributes.Transaction_Type);
            });
          }, 200);
        }
      });
    });
  </script>
</head>

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

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

ShawnRoberts1 · ‎05-15-2019

Thanks Robert I'll try it that way!