AnsweredAssumed Answered

Popup contents derived by functions don't work

Question asked by MollyKFoley on Apr 11, 2018
Latest reply on Apr 12, 2018 by MollyKFoley

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??

Outcomes