Popup contents derived by functions don't work

MKF62 — Sun, 12 Dec 2021 00:43:27 GMT

I had this working but suddenly it's not working and I cannot figure out why because all I've changed is my HTML and some styling (in the body) which should have nothing to do with the popup contents. The variables (function names) are global as the documentation says they should be. There is literally no reason this should not work, yet it doesn't.

The require statement and global variables:

var map, qhStatus, coarseClassify, fineClassify, cropType, pcType, pubOrPriv;
require([
    "esri/map",
    "esri/request",
    "esri/arcgis/utils",
    "esri/layers/FeatureLayer",
    "esri/tasks/Geoprocessor",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/graphic",
    "esri/renderers/UniqueValueRenderer",
    "esri/renderers/SimpleRenderer",
    "esri/Color",
    "esri/InfoTemplate",
    "esri/tasks/query",
    "esri/tasks/QueryTask",
    "esri/dijit/Legend",
    "esri/dijit/PopupTemplate",
    "dojo/query",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/on",
    "dojox/widget/Standby",
    "dojo/parser",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
  ],
  function(
    Map,
    esriRequest,
    arcgisUtils,
    FeatureLayer,
    Geoprocessor,
    SimpleLineSymbol,
    SimpleFillSymbol,
    Graphic,
    UniqueValueRenderer,
    SimpleRenderer,
    Color,
    InfoTemplate,
    Query,
    QueryTask,
    Legend,
    PopupTemplate,
    query,
    dom,
    domConstruct,
    on,
    Standby,
    parser
  ) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The popup content for one of my popups (though none of them are working as they should). Note that the Number_Format function is called successfully and formats correctly but my custom function "pubOrPriv" is not called, thus the popups don't reflect the correct information.

//Format the popup content for the CIP areas feature layer
    var cipPopupContent = "<ul><li>State: ${StateID}</li>" +
                  "<li>Area: ${Area_ac:NumberFormat(places: 2)} acres</li>" +
                  "<li>Land Type: ${PublicLand:pubOrPriv}</li></ul>"
    var cipPopupBox = new InfoTemplate("${Name} ${Route} Area", cipPopupContent);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Example custom function that is supposed to be called when a cipPopupBox should appear:

//Format the land type attribute for the cipPopupBox
      pubOrPriv = function(value, key, data){
          var land = "";
          var pub = value;
          var priv = data.PrivateLand;
      
          if (pub == 1 && priv == 0){
              land = "Public"
          }
          else if (pub == 0 && priv == 1){
              land = "Private"
          }
          else{
              land = "Public and private"
          }
          return land;
      };    ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The popup functions work as expected when the HTML is like so:

  <div id="map"></div>
  <div id="info">
    <div id="legend"></div>
  </div>
  <div id="HabClassifyGPService">
    State: <select id="stateAbbrev" name="stateIDList" form="uploadForm">
      <option value="AL">Alabama</option>
      <option value="AR">Arkansas</option>
      <option value="DE">Delaware</option>
      <option value="GA">Georgia</option>
      <option value="FL">Florida</option>
      <option value="IL">Illinois</option>
      <option value="IN">Indiana</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Lousiana</option>
      <option value="MD">Maryland</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="NE">Nebraska</option>
      <option value="NJ">New Jersey</option>
      <option value="NC">North Carolina</option>
      <option value="OH">Ohio</option>
      <option value="OK">Oklahoma</option>
      <option value="PA">Pennsylvania</option>
      <option value="SC">South Carolina</option>
      <option value="TN">Tennessee</option>
      <option value="TX">Texas</option>
      <option value="VA">Virginia</option>
      <option value="WV">West Virginia</option>
    </select>
    <form id="uploadForm" method="post" enctype="multipart/form-data">
      <label class="custom-file-upload">
        <input type="file" name="file" id="dataUpload"/>
        <span id="fileUploadLabel">File Upload</span>
      </label>
      <input type="button" value="Upload" id="upload"/>
    </form>
  </div>
  <div id="viewableLayers">
    Select year: <select id="data-year"></select><br><br>
    <legend>Toggle renderers:</legend>
    <label><input type="radio" id="qhStatusLyr" name="chosenLayer" value="qhStatus" checked>Quail Habitat Status</label>
    <label><input type="radio" id="coarseHabLyr" name="chosenLayer" value="coarse">Coarse-level Habitat Types</label>
    <label><input type="radio" id="fineHabLyr" name="chosenLayer" value="fine">Fine-level Habitat Types</label><br>
    <legend>Set Transparency:</legend>
    <input type="radio" id="100-percent" name="setOpacity" value="100" checked>0%
    <input type="radio" id="75-percent" name="setOpacity" value="25">25%
    <input type="radio" id="50-percent" name="setOpacity" value="50">50%
    <input type="radio" id="25-percent" name="setOpacity" value="75">75%<br><br>
    <legend>Toggle layers:</legend>
    <label><input type="checkbox" id="protectCoverLyr" name="pcLayer" value="pc">Protective Cover</label>
    <label><input type="checkbox" id="faLyr" name="faLayer" value="fa" checked>Focal & Reference Areas</label>
  </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The popups do not work when the HTML is like so (I haven't added the HabitatClassifyGP stuff yet to this version):

    <div id="map"></div>
    <div id="info">
        Select data year to display: <br />
        <select id="data-year"></select>
        <div id="legendDiv">
            <div id="legend"></div>
        </div>
        <div id="layersDiv">
            <h5>Layers</h5>
            <div id="toggleLayers">
                <label><input type="checkbox" id="protectCoverLyr" name="pcLayer" value="pc">Protective Cover</label>
                <label><input type="checkbox" id="faLyr" name="faLayer" value="fa" checked>Focal & Reference Areas</label>
            </div>
        </div>
        <div id="rendererDiv">
            <h5>Renderers</h5>
            <label><input type="radio" id="qhStatusLyr" name="chosenLayer" value="qhStatus" checked>Quail Habitat Status</label>
            <label><input type="radio" id="coarseHabLyr" name="chosenLayer" value="coarse">Coarse-level Habitat Types</label>
            <label><input type="radio" id="fineHabLyr" name="chosenLayer" value="fine">Fine-level Habitat Types</label><br />
            <h5>Opacity</h5>
            <input type="radio" id="100-percent" name="setOpacity" value="100" checked>0%
            <input type="radio" id="75-percent" name="setOpacity" value="25">25%
            <input type="radio" id="50-percent" name="setOpacity" value="50">50%
            <input type="radio" id="25-percent" name="setOpacity" value="75">75%
        </div>
    </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

How do I get it to call my functions??

Re: Popup contents derived by functions don't work

MKF62 — Thu, 12 Apr 2018 12:15:31 GMT

Upon rebuilding my application piece by piece, I determined the problem was that I had not yet styled something. I am in the process of transferring this web application from toying around with it in sandbox to putting it in an actual development software (Visual Studio) - there is a geoprocessing service that I had included in my JS code, but hadn't added the HTML buttons or anything yet to run that service in the development software so when I went back to sandbox and my HTML there included buttons to run the GP service, the popups worked, but when I went to VS and the HTML didn't include those buttons, the popups broke. I'm still a little unclear as to why this affected the popups, but it's fixed so alls well that ends well, I guess.

topic Popup contents derived by functions don't work in ArcGIS JavaScript Maps SDK Questions

Popup contents derived by functions don't work

Re: Popup contents derived by functions don't work