Popup contents derived by functions don't work

Question

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 = " * State: ${StateID} " + "* Area: ${Area_ac:NumberFormat(places: 2)} acres " + "* Land Type: ${PublicLand:pubOrPriv} " 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">Alabamaoption> <option value="AR">Arkansasoption> <option value="DE">Delawareoption> <option value="GA">Georgiaoption> <option value="FL">Floridaoption> <option value="IL">Illinoisoption> <option value="IN">Indianaoption> <option value="IA">Iowaoption> <option value="KS">Kansasoption> <option value="KY">Kentuckyoption> <option value="LA">Lousianaoption> <option value="MD">Marylandoption> <option value="MS">Mississippioption> <option value="MO">Missourioption> <option value="NE">Nebraskaoption> <option value="NJ">New Jerseyoption> <option value="NC">North Carolinaoption> <option value="OH">Ohiooption> <option value="OK">Oklahomaoption> <option value="PA">Pennsylvaniaoption> <option value="SC">South Carolinaoption> <option value="TN">Tennesseeoption> <option value="TX">Texasoption> <option value="VA">Virginiaoption> <option value="WV">West Virginiaoption> 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 Uploadspan> 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 Statuslabel> <label><input type="radio" id="coarseHabLyr" name="chosenLayer" value="coarse">Coarse-level Habitat Typeslabel> <label><input type="radio" id="fineHabLyr" name="chosenLayer" value="fine">Fine-level Habitat Typeslabel><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 Coverlabel> <label><input type="checkbox" id="faLyr" name="faLayer" value="fa" checked>Focal & Reference Areaslabel> 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>Layersh5> <div id="toggleLayers"> <label><input type="checkbox" id="protectCoverLyr" name="pcLayer" value="pc">Protective Coverlabel> <label><input type="checkbox" id="faLyr" name="faLayer" value="fa" checked>Focal & Reference Areaslabel> div> div> <div id="rendererDiv"> <h5>Renderersh5> <label><input type="radio" id="qhStatusLyr" name="chosenLayer" value="qhStatus" checked>Quail Habitat Statuslabel> <label><input type="radio" id="coarseHabLyr" name="chosenLayer" value="coarse">Coarse-level Habitat Typeslabel> <label><input type="radio" id="fineHabLyr" name="chosenLayer" value="fine">Fine-level Habitat Typeslabel><br /> <h5>Opacityh5> <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??

MKF62 · Accepted Answer

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.