Cannot get a JavaScript ComboBox to populate using New AMD code

StefanCoe · ‎08-01-2014

Hello,

I am having a really hard time getting a combobox to populate in an existing web app I am working on so I decided to re-write an old ComboBox sample and still cannot get it to work. I really want to get it to work using the new coding structure. Here is the link to the old sample:

Using JavaScript to populate a ComboBox with unique values | ArcGIS Blog

Here is my attempt. Thanks in advance for any help !

<!DOCTYPE html>
<html>


  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Populate dropdown list with unique values</title>
    <link rel="stylesheet" type="text/css" 
            href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.10/js/dojo/dijit/themes/tundra/tundra.css">
    <style type="text/css">body,html,#main{margin:0;padding:0;height:100%;width:100%;}</style>
    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
    var map;
 var resizeTimer;
      require(["esri/map", "esri/tasks/query", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox", "dojo/data/ItemFileReadStore","dojo/store/Memory "dojo/domReady!"], function(Map, query, parser, BorderContainer, ContentPane, ComboBox, ItemFileReadStore, Memory) {

  parser.parse();
  map = new Map("map", {
          basemap: "topo",
          //center: [-122.45, 37.75], // longitude, latitude
    center : [-85.915,38.105],
          zoom: 13
        });
  var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/M...");

        //Define query parameters
        var query = new esri.tasks.Query();
        query.outFields = ["ZONING_TYPE"];
        query.returnGeometry = false;
        query.where  = "ZONING_TYPE <> ''"
        queryTask.execute(query,populateList);


        //var initialExtent = new esri.geometry.Extent(-85.915,38.105,-85.52,38.33,
          //      new esri.SpatialReference({wkid:4326}) );
       // map = new esri.Map("map", {extent:initialExtent});


        //Create tiled and dynamic map services and add to the map - for the dynamic service set the transparency
        //and provide an id so we can access it later
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));     
        map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/M...",
                {"opacity":.4,"id":"dynamic"}));
      function populateList(results) {
        //Populate the dropdown list box with unique values
        var zone;
        var values = [];
        var testVals={};


        //Add option to display all zoning types to the dropdown list 
        values.push({name:"ALL"})
        
        var features = results.features;
        dojo.forEach (features, function(feature) {
          zone = feature.attributes.ZONING_TYPE;
          if (!testVals[zone]) {
            testVals[zone] = true;
            values.push({name:zone});
          }
        });
        
        var dataItems = {
               identifier: 'name',
               label: 'name',
               items: values
        };
        var store = new dojo.store.Memory({data:dataItems});
        dijit.byId("mySelect").store = store;
      }
      
      function applyLayerDef(selItem){
        //Filter the layer to display only the selected zoning types
        if (selItem.value !== 'ALL') {
          var layerDefs = [];
          layerDefs[2] = "ZONING_TYPE = " + "'" + selItem.value + "'";
          layerDefs.visibleLayers = [2];
          map.getLayer("dynamic").setLayerDefinitions(layerDefs);
        }
        else {
          map.getLayer("dynamic").setDefaultLayerDefinitions();
        }
      }


      function resizeMap() {
        //Handle browser resize
        clearTimeout(resizeTimer);
        
        resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
        }, 800);
      }
   });
   
   
    </script>
  </head>


  <body class="claro">
    <div id="main" 
            dojotype="dijit.layout.BorderContainer"
            design="headline" 
            gutters="true">
      <div id="header"
             dojotype="dijit.layout.ContentPane"
             region="top"
             style="height:25px;">
        <select id="mySelect" 
             dojotype="dijit.form.ComboBox"
             style="width:300px;font-size:18px;"
             autoComplete="true"
             forceValidOption="false"
             value="Select Zoning Type"
             onchange="applyLayerDef(this)"></select>
      </div>
      <div id="map"
             dojotype="dijit.layout.ContentPane"
             region="center" 
             style="border:1px solid #000;margin:5px">
      </div>
    </div>
  </body>
</html>

OwenEarley · ‎08-01-2014

Hi Stefan,

In your require list there is an issue:

"dojo/store/Memory "dojo/domReady!" // problem

The end quote and comma are missing after dojo/store/Memory. This needs to be changed to:

"dojo/store/Memory", "dojo/domReady!"

The Tundra stylesheet is also returning a 404 error. Try using:

or:

After completing these changes your code populates the combo values.

However, there is another issue with the way that the applyLayerDef() function is called using:

<select id="mySelect"

dojotype="dijit.form.ComboBox"

style="width:300px;font-size:18px;"

autoComplete="true"

forceValidOption="false"

value="Select Zoning Type"

onchange="applyLayerDef(this)"></select>

The new style of code creates a scoping issue in that the applyLayerDef function is not available from the HTML declared events (such as the mySelect onchange event). To get around this issue remove the onchange attribute from the select element and wire up the event within your JS code, for example:

      // this replaces your applyLayerDef() function
      dijit.byId("mySelect").on("change", function () {
        //Filter the layer to display only the selected zoning types
        var zone = dijit.byId("mySelect").value;
        if (zone !== 'ALL') {
          var layerDefs = [];
          layerDefs[2] = "ZONING_TYPE = " + "'" + zone + "'";
          layerDefs.visibleLayers = [2];
          map.getLayer("dynamic").setLayerDefinitions(layerDefs);
        }
        else {
          map.getLayer("dynamic").setDefaultLayerDefinitions();
        }
      });

Note that this uses the dojo/on module that will need to be included in your require list.

There is a full working example I created on JS Bin you can check out.

Hope this helps,

Owen

Spatial XP

View solution in original post

OwenEarley · ‎08-01-2014