topic Re: Populating a combo box based on the value from a select list in ArcGIS JavaScript Maps SDK Questions

Populating a combo box based on the value from a select list

MikeOnzay — Tue, 08 Nov 2011 17:24:56 GMT

I'm trying to populate a combo box based on a select list. I'm using a combination of examples from the samples page. My query is valid as I have tested it against the layer in the services directory and using an alert I can see that it is passing the correct syntax. I get no FireFox errors but the combo box is not getting populated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>State Info</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5">
</script>
<script type="text/javascript">var dojoConfig = { parseOnLoad:true };</script>
    <script type="text/javascript">
      dojo.require("esri.tasks.query");
      dojo.require("dojo.parser");
      dojo.require("dijit.form.ComboBox");
      dojo.require("dojo.data.ItemFileReadStore");

 var query, queryTask;

function init() {
    //create map and add layer
    map = new esri.Map("mapDiv");
    var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
    map.addLayer(layer);

    //initialize query task
    queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");

    //initialize query
    query = new esri.tasks.Query();
    query.returnGeometry = false;
    query.outFields = ["SUB_REGION", "STATE_NAME"];

  }

  function executeQueryTask(subr) {
   //alert(subr);
   //set query based on what user typed in for population;
    query.where = "SUB_REGION = '"+ subr +"'";
 //alert(query.where);
    //execute query
    queryTask.execute(query,populateList);
  }

  function populateList(results) {
    
        //Populate the dropdown list box with unique values
        var zone;
        var values = [];
        var testVals={};
    
        values.push({name:"ALL"});
        
        var features = results.features;
        dojo.forEach (features, function(feature) {
          zone = feature.attributes.STATE_NAME;
          if (!testVals[zone]) {
            testVals[zone] = true;
            values.push({name:zone});
            
          }
        });
  
        //Create a ItemFileReadStore and use it for the ComboBox's data source
        var dataItems = { 
               identifier: 'name',
               label: 'name', 
               items: values
        };
        var store = new dojo.data.ItemFileReadStore({data:dataItems});
        dijit.byId("mySelect").store = store;
      }
   
  dojo.addOnLoad(init);
</script>
  <body class="tundra">
    <br/>
    US city population greater than : 
    

 <select name="subregion" id="subregion" onChange="executeQueryTask(dojo.byId('subregion').value);">
  <option value="Pacific">Pacific Region</option>
  <option value="Mtn">Mountain Region</option>
  <option value="S Atl">South Atlantic Region</option>
 </select>
 
 <select id="mySelect" 
             dojotype="dijit.form.ComboBox"
             style="width:300px;font-size:18px;"
             autoComplete="true"
             forceValidOption="false"
             value="Select Zoning Type">
 </select>

    <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>


  </body>

</html>

Re: Populating a combo box based on the value from a select list

HemingZhu — Sun, 12 Dec 2021 08:04:52 GMT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>State Info</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5">
</script>
<script type="text/javascript">var dojoConfig = { parseOnLoad:true };</script>
    <script type="text/javascript">
      dojo.require("esri.tasks.query");
      dojo.require("dojo.parser");
      dojo.require("dijit.form.ComboBox");
      dojo.require("dojo.data.ItemFileReadStore");

 var query, queryTask;

function init() {
    //create map and add layer
    map = new esri.Map("mapDiv");
    var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
    map.addLayer(layer);

    //initialize query task
    queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");

    //initialize query
    query = new esri.tasks.Query();
    query.returnGeometry = false;
    query.outFields = ["SUB_REGION", "STATE_NAME"];

  }

  function executeQueryTask(subr) {
   //alert(subr);
   //set query based on what user typed in for population;
    query.where = "SUB_REGION = '"+ subr +"'";
 //alert(query.where);
    //execute query
    queryTask.execute(query,populateList);
  }

  function populateList(results) {
    
        //Populate the dropdown list box with unique values
        var zone;
        var values = [];
        var testVals={};
    
        values.push({name:"ALL"});
        
        var features = results.features;
        dojo.forEach (features, function(feature) {
          zone = feature.attributes.STATE_NAME;
          if (!testVals[zone]) {
            testVals[zone] = true;
            values.push({name:zone});
            
          }
        });
  
        //Create a ItemFileReadStore and use it for the ComboBox's data source
        var dataItems = { 
               identifier: 'name',
               label: 'name', 
               items: values
        };
        var store = new dojo.data.ItemFileReadStore({data:dataItems});
        dijit.byId("mySelect").store = store;
      }
   
  dojo.addOnLoad(init);
</script>
  <body class="tundra">
    <br/>
    US city population greater than : 
    

 <select name="subregion" id="subregion" onChange="executeQueryTask(dojo.byId('subregion').value);">
  <option value="Pacific">Pacific Region</option>
  <option value="Mtn">Mountain Region</option>
  <option value="S Atl">South Atlantic Region</option>
 </select>
 
 <select id="mySelect" 
             dojotype="dijit.form.ComboBox"
             style="width:300px;font-size:18px;"
             autoComplete="true"
             forceValidOption="false"
             value="Select Zoning Type">
 </select>

    <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>


  </body>

</html>

No field "SUB_REGION" in http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0

Re: Populating a combo box based on the value from a select list

MikeOnzay — Tue, 08 Nov 2011 18:02:06 GMT

Okay...right. I'm working with too many samples. It should have been this layer: http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2

but the combo box still does not populate.

Re: Populating a combo box based on the value from a select list

KellyHutchins — Sun, 12 Dec 2021 08:04:54 GMT

You have to move the script tag that sets up dojoConfig before the script tag that adds the ArcGIS API for JavaScript.

  <head>
    <title>State Info</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">var dojoConfig = { parseOnLoad:true };</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5">
    </script>

If djConfig is defined after the javascript api (and dojo) are loaded then the configuration properties are ignored. In this case that means the call to parse the dojo widgets when the page loads is ignored and the combo boxes in your page are not dojo widgets so your code that uses dijit.byId to get the combo box fails.

Re: Populating a combo box based on the value from a select list

MikeOnzay — Tue, 08 Nov 2011 19:27:18 GMT

Thank you very much for the solution and the explanation. Very helpful.