topic Re: populating dropdown menu with query results in ArcGIS JavaScript Maps SDK Questions

populating dropdown menu with query results

ChrisBerryman1 — Wed, 27 Jun 2012 12:45:30 GMT

Hello, I am trying to create a dropdown menu for my routing app that allows a user to select from a list of buildings, and when the user selects a building the location of that building is added to the route for them to navigate to. I have gotten the the drop down menu to populate with buildings, but not from the query results. I was thinking that it might just be easier to hard code an array that includes all the buildings and the xy coordinates for each building.

here is the url for my app:

Re: populating dropdown menu with query results

KellyHutchins — Wed, 27 Jun 2012 14:21:48 GMT

Chris,

Looks like your url didn't come through. Can you repost? Or post the snippet you are using to build the menu items from the query results.

Re: populating dropdown menu with query results

ChrisBerryman1 — Wed, 27 Jun 2012 14:26:46 GMT

http://gis.uww.edu/wordpress/jqmmap.php

Re: populating dropdown menu with query results

KellyHutchins — Wed, 27 Jun 2012 15:38:35 GMT

Chris,

Here's a sample that shows how to populate a dropdown list with the building names from your service:

http://jsfiddle.net/H7f9k/1/
Note: Update url to sort building names alphabetically

When the building name is selected from the list a highlight graphic is added to the map for the selected building.

Re: populating dropdown menu with query results

ReneeMaxwell — Sat, 11 Dec 2021 20:38:05 GMT

I use a different method than kelly's above that doesn't require jquery. It works great in 2.8 but since 3.0 launched with the new version of dojo I haven't been able to get it to work. I'm wondering if that is why kelly's example uses jquery instead of dojo?

function loadSearch() {
    var bqTask = new esri.tasks.QueryTask(mapURL + "/" + bldgLayerId);
    var bldgQuery = new esri.tasks.Query();
    bldgQuery.returnGeometry = false;
    bldgQuery.outFields = ["OBJECTID", "NAME", "BLDCODE", "KEYWORDS", "TYPE", "STATUS", "LABEL", "CAMPUS_ID"];
    bldgQuery.where = "CAMPUS_ID = 'MAIN' AND STATUS <> 'Restricted'";
    bqTask.execute(bldgQuery);

    dojo.connect(bqTask, "onComplete", function (nResults) {

        var bldgItems = dojo.map(nResults.features, function (item) {
            return item.attributes;
        });
        log(bldgItems.length);
        
        var data = {
            'identifier': "OBJECTID",
            'label': "NAME",
            'items': bldgItems
        };
        bldgStore = new dojo.data.ItemFileReadStore({ data: data });

        var searchDD = dijit.byId("bldgDD");
        searchDD.set("store", bldgStore);
        searchDD.searchAttr = "NAME";
        searchDD.fetchProperties = { sort: [{ attribute: 'NAME'}] };

        dojo.connect(searchDD , "onChange", function (queryID) {
    });
}

function queryID(bldgid) {
    var qidTask = new esri.tasks.QueryTask(mapURL + "/" + bldgLayerId);
    var queryid = new esri.tasks.Query();
    var selectedBldg = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL,
     new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
     new dojo.Color([204, 0, 0]), 2));

    queryid.returnGeometry = true;
    queryid.outFields = ["OBJECTID", "NAME", "BLDCODE", "KEYWORDS", "TYPE", "STATUS", "LABEL"];
    queryid.where = "OBJECTID = " + bldgid;

    //When the query completes, select the building
    dojo.connect(qidTask, "onComplete", function (featureSet) {
        if (featureSet.features[0]) {
            if (map.graphics) {
                map.graphics.clear();
            }
            var graphic = featureSet.features[0];
            var bldgnm = graphic.attributes["NAME"];
            var blcode = graphic.attributes["OBJECTID"];
            graphic.setSymbol(selectedBldg);
            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
            var selExtent = esri.graphicsExtent(map.graphics.graphics).expand(2);
            map.setExtent(selExtent);
        }
    });
    qidTask.execute(queryid);
}

Re: populating dropdown menu with query results

KellyHutchins — Wed, 27 Jun 2012 19:06:21 GMT

Renee,

I used jQuery because Chris's app used jQuery so I wanted to use an approach that would integrate well into his app. Dojo should work just fine - do you get any errors in the console if you run your app with Firebug or Chrome Dev Tools open? Have you taken a look at the 'Migrating to 3.0' help topic to see if your app needs any updates after upgrading?

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/migration_30.htm

Re: populating dropdown menu with query results

KellyHutchins — Wed, 27 Jun 2012 19:44:53 GMT

Renee,

We do have one sample that uses the new 1.7(AMD) style syntax here:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/fl_dgrid.html

Re: populating dropdown menu with query results

ReneeMaxwell — Wed, 27 Jun 2012 19:46:31 GMT

I've also tried using dojo's ItemFileReadStore (as per version 2.8) for the dropdown and according to dojo's documentation it should still work in dojo 1.7, but I haven't had any success. When I create that type of store the dropdown is empty but no errors are shown. I've also tried using declarative markup as well (not recommended by dojo) and that doesn't seem to make any difference either way.

Re: populating dropdown menu with query results

ReneeMaxwell — Wed, 27 Jun 2012 19:51:20 GMT

Thanks for directing me to that sample, that's what I've been hunting for. I wish they hadn't buried it there but at least it's a start.

I'm disappointed that I will apparently have to significantly rewrite and restructure pretty much all of my code on all of my sites with the new release. The differences are substantial.

Re: populating dropdown menu with query results

KellyHutchins — Sat, 11 Dec 2021 20:38:11 GMT

Renee,

You don't need to perform a significant re-write to upgrade to 3.0. Here's a version of your sample that works for me that uses 3.0 with the 1.6 style syntax:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Dojo Dropdown Demo</title>

    <link rel="stylesheet" href="https://community.esri.com//serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
    <!-- ArcGIS API for JavaScript -->
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0compact"></script>



    <script type="text/javascript">


      dojo.require("esri.map");
      dojo.require("esri.tasks.Query");
      dojo.require("dijit.form.FilteringSelect");
      dojo.require("dojo.data.ItemFileReadStore");
      
      dojo.addOnLoad(init);

      var map,queryTask;

      function init() {     
        queryTask = new esri.tasks.QueryTask("http://armstrong.uww.edu/ArcGIS/rest/services/NewCampus/MapServer/27");
      
        map = new esri.Map("map");
    
        dojo.connect(map, "onLoad", function() {
          //populate dropdown 
          executeQuery();
        });

        // Add the campus basemap 
        var campusMap = new esri.layers.ArcGISTiledMapServiceLayer('http://armstrong.uww.edu/ArcGIS/rest/services/NewCampus/MapServer');
        map.addLayer(campusMap);
      }

      function executeQuery() {

          
        //execute the query task then populate the dropdown menu with list of building names 
        var query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["BldgName","FID"];
        query.where = "1=1";
        queryTask.execute(query,populateMenu);
        
      }
      function populateMenu(featureSet){
      
         var items = dojo.map(featureSet.features, function (item) {
                    return {
                        name: item.attributes.BldgName,
                        id:item.attributes.FID
                    };
                });
             var data = {
              identifier:"id",
              items:items
              };
             var objStore = new dojo.data.ItemFileReadStore({data:data});

          var filteringSelect = new dijit.form.FilteringSelect({
            style:'width:300px;',
            placeHolder:'Select a building or start typing',
            store:objStore,
            required:false,
            labelAttr:'name',
            fetchProperties:{sort:[{attribute:'name'}]},
            onChange:function(val){
                if(val){
                  var selectQuery = new esri.tasks.Query();
                  selectQuery.returnGeometry = true;
                  selectQuery.objectIds = [val];
                  queryTask.execute(selectQuery,function(featureSet){  
                    map.graphics.clear(); //clear any existing map graphics 
                    //get the first feature and add to map 
                        if(featureSet.features.length > 0){
                          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                           new dojo.Color([255,0,0]), 2),new dojo.Color([255,255,0,0.25]));
                          var feature = featureSet.features[0];
                          var graphic = new esri.Graphic(feature.geometry,symbol);
                          map.graphics.add(graphic);
                    }
                });
                }
            }            
          },'bldgSelect');




      }

    </script>
  </head>

  <body class='claro' style="font-family: Arial Unicode MS,Arial,sans-serif;">

    <input id='bldgSelect'/>
    <div id="wrapper" style="position: relative; width: 700px; height: 500px; border:1px solid #000;">
      <!-- Map canvas -->
      <div id="map" style="position: absolute; width: 700px; height: 500px; z-index: 1;"></div>
    </div>
  </body>

</html>

   
�??

Thanks for directing me to that sample, that's what I've been hunting for. I wish they hadn't buried it there but at least it's a start.

I'm disappointed that I will apparently have to significantly rewrite and restructure pretty much all of my code on all of my sites with the new release. The differences are substantial.

Re: populating dropdown menu with query results

ReneeMaxwell — Fri, 29 Jun 2012 12:03:53 GMT

Thank you Kelly. It's a shame that we still can't leverage the performance advantages of dojo 1.7.

Re: populating dropdown menu with query results

ChrisBerryman1 — Fri, 29 Jun 2012 15:31:52 GMT

thats great, thanks. here is the working url with the dropdown menu if you select goto: gis.uww.edu/wordpress/jqmmap.php

Re: populating dropdown menu with query results

JoshVan_Kylen — Tue, 21 Oct 2014 16:24:19 GMT

Unfortunately, lots of links like this are now broken.

Re: populating dropdown menu with query results

ReneeMaxwell — Sat, 11 Dec 2021 20:38:08 GMT

Kelly,

Yes, I've read the Migrating doc and I've been reading the Dojo documentation pages and I'm still struggling to get my site to work. I'm having difficulty making sense of the new dojo require method and I'm really frustrated that there aren't any samples that show dojo 1.7 in use with the javascript API.

So far I'm trying to get one widget to work at a time and I've been stuck on this building dropdown for the last two days. I've been able to load the dropdown from a query but I can't get the onChange function to work. When you select a building from the dropdown the Firebug console shows this error: "this.store._oldAPI is undefined" which appears to be coming from dojo.

Here's my trial code:

require(["dojo/ready", "dojo/dom", "dojo/query",
    "esri/map",
    "esri/toolbars/navigation",
    "esri/tasks/query", 
    "esri/dijit/Scalebar",
    "dijit/dijit", "dijit/layout/ContentPane", "dijit/layout/TabContainer",
    "dijit/Toolbar",
    "dijit/form/Button", "dijit/form/ToggleButton",
    "dijit/form/FilteringSelect",
    "dijit/TitlePane",
    "dojo/store/Memory", "dojo/data/ObjectStore"
]);

var basemap, navToolbar, map, bldgStore, selectedBldg, visible = []; //
var mapURL = "http://.../rest/services/MU_Base/MapServer";
var bldgLayerId = 58;
var baseLayers = [58,59,61,62,63];

function Init() {
    map = new esri.Map("mapDiv", { logo: false });

    var imageParameters = new esri.layers.ImageParameters();
    imageParameters.format = "PNG24";  //set the image type to PNG24, note default is PNG8.
    basemap = new esri.layers.ArcGISDynamicMapServiceLayer(mapURL, { "imageParameters": imageParameters });
    map.addLayer(basemap);

    //** Add the navigation toolbar
    navToolbar = new esri.toolbars.Navigation(map);

    selectedBldg = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL,
     new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
     new dojo.Color([204, 0, 0]), 2));
    //** CONNECT MAP FUNCTIONS
    dojo.connect(map, "onLoad", loadBuildingStore);
    //dojo.connect(map, "onExtentChange", extentHistoryChangeHandler);

    //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in 
    var resizeTimer;
    dojo.connect(map, 'onLoad', function (theMap) {
        var scalebar = new esri.dijit.Scalebar({
            map: map,
            scalebarUnit: 'english'
        });
        dojo.connect(dojo.byId("mapPanel"), 'resize', function () {
            map.resize();
        });
        visible = basemap.visibleLayers;
    });
}

dojo.ready(Init);

function loadBuildingStore() {
    var bqTask = new esri.tasks.QueryTask(mapURL + "/" + bldgLayerId);
    var bldgQuery = new esri.tasks.Query();
    bldgQuery.returnGeometry = false;
    bldgQuery.outFields = ["OBJECTID", "NAME", "BLDCODE", "KEYWORDS", "TYPE", "STATUS", "ADDRESS"];
    bldgQuery.where = "CAMPUS_ID = 'MAIN' AND STATUS <> 'RESTRICTED'";
    bqTask.execute(bldgQuery);

    dojo.connect(bqTask, "onComplete", function (nResults) {
        var bldgItems = dojo.map(nResults.features, function (item) {
            //ATTEMPT TO SEE IF PROBLEM LIES IN INTEGER VALUE FOR IDENTIFIER IN DATASTORE? NO DIFFERENCE
            var idStr = item.attributes.OBJECTID.toString();
            item.attributes.OBJECTID = idStr;
            return item.attributes;
        });

        var data = {
            'identifier': "OBJECTID",
            'items': bldgItems
        };
        var objStore = new dojo.store.Memory({ data: data, idProperty: 'OBJECTID' });

        var select = new dijit.form.FilteringSelect({
            id: "bldgDD",
            style: "width: 300px;",
            placeHolder: "Select a building or start typing",
            store: dojo.data.ObjectStore({ objectStore: objStore }),
            required: false,
            labelAttr: 'NAME',
            fetchProperties: { sort: [{ attribute: 'NAME'}] },
            //            onChange: queryID
            onChange: function (val) {
                log(val);
                //queryID(val);
            }
        }, "bldgDD");
    });
}