AnsweredAssumed Answered

Cannot get a JavaScript ComboBox to populate using New AMD code

Question asked by stefancoe on Aug 1, 2014
Latest reply on Aug 1, 2014 by stefancoe

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/MapServer/2");

        //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/MapServer",
                {"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>

Outcomes