Query data without a map does not work

ionarawilson1 · ‎09-17-2013

I added the query without a map to my code, but it is not working. When I click on "Get Details" nothing happens. Can anybody tell me what is wrong with my code. The code for the query without a map can be found here:

https://developers.arcgis.com/en/javascript/jssamples/query_nomap.html

I suspect it is something to do with the order of the functions but I am not sure. Thanks!

[HTML]
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>SARS JAVA SCRIPT TEST</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css" />
    <style>
      html,body{height:100%;width:100%;margin:0;overflow:hidden;}
      #map{
        padding:0;
      }
      #header{
        font-size: 1.1em;
        font-family: sans-serif;
        padding-left: 1em;
        padding-top:4px;
        color:#660000;
      }
      .templatePicker {
        border: none;
      }

      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}
    </style>

    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      dojo.require("esri.tasks.query");


   var map;

      require([
        "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",

        "esri/toolbars/edit",

        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",
"esri/tasks/query", "esri/tasks/QueryTask",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor",
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi",

        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",

        "dojo/dom", "dojo/on",

        "dojo/domReady!",

      ], function(
        Map, BasemapGallery, arcgisUtils, Edit,
        ArcGISTiledMapServiceLayer, FeatureLayer,
Query, QueryTask,
        SimpleMarkerSymbol, SimpleLineSymbol,
        Editor, TemplatePicker,
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys,
        dom, on
      ) {
        parser.parse();

        // snapping is enabled for this sample - change the tooltip to reflect this
        jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";

        // refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
        esriConfig.defaults.io.proxyUrl = "/proxy";

        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
        esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        map = new Map("map", {
          basemap: "hybrid",

          center: [-98.57, 30.98],
          zoom: 6,
          slider: true
        });

map.on("layers-add-result", initEditor);

        var rivers = new FeatureLayer("http://tfsgis-iisd01:6080/arcgis/rest/services/MyMapService2/FeatureServer/1",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

        var waterbodies = new FeatureLayer("http://tfsgis-iisd01:6080/arcgis/rest/services/MyMapService2/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

        var stewardship = new FeatureLayer("http://tfsgis-iisd01:6080/arcgis/rest/services/MyMapService2/FeatureServer/2",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

        map.addLayers([waterbodies,rivers,stewardship]);



        function initEditor(evt) {

          var templateLayers = arrayUtils.map(evt.layers, function(result){
            return result.layer;
          });
          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 3
          }, "templateDiv");
          templatePicker.startup();

          var layers = arrayUtils.map(evt.layers, function(result) {
            return { featureLayer: result.layer };
          });
          var settings = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                Editor.CREATE_TOOL_CIRCLE,
                Editor.CREATE_TOOL_TRIANGLE,
                Editor.CREATE_TOOL_RECTANGLE
              ]
            },
            toolbarOptions: {
              reshapeVisible: true
            }


          };

          var params = {settings: settings};
          var myEditor = new Editor(params,'editorDiv');
          //define snapping options
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CROSS,
            15,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0, 0.5]),
              5
            ),
            null
          );
          map.enableSnapping({
            snapPointSymbol: symbol,
            tolerance: 20,
            snapKey: keys.ALT
          });

          myEditor.startup();
        }

//add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
        var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        basemapGallery.startup();

        basemapGallery.on("error", function(msg) {
          console.log("basemap gallery error: ", msg);
        });

    var queryTask, query;
queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");

        query = new Query();
        query.returnGeometry = false;
        query.outFields = ["SQMI","STATE_NAME","STATE_FIPS","SUB_REGION","STATE_ABBR","POP2000","POP2007","POP00_SQMI","POP07_SQMI","HOUSEHOLDS","MALES","FEMALES","WHITE","BLACK","AMERI_ES","ASIAN","OTHER","HISPANIC","AGE_UNDER5","AGE_5_17","AGE_18_21","AGE_22_29","AGE_30_39","AGE_40_49","AGE_50_64","AGE_65_UP"];

        on(dom.byId("execute"), "click", execute);

        function execute(stateName) {
          query.text = dom.byId("stateName").value;
          //execute query
          queryTask.execute(query, showResults);
        }

        function showResults(results)

{
          var s = "";
          for (var i=0, il=results.features.length; i<il; i++)
    {
            var featureAttributes = results.features.attributes;
            for (att in featureAttributes) {
              s = s + "<b>" + att + ":</b> " + featureAttributes[att] + "<br>";
           }
            s = s + "<br>";
          }
          dom.byId("info").innerHTML = s;
        }

      });// end require
    </script>
</head>
<body class="claro">
    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
      <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
       Spatial Accomplishment Report System
      </div>

      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
        <div id="templateDiv"></div>
        <div id="editorDiv"></div>
   US state name :
     <input type="text" id="stateName" value="California">
     <input id="execute" type="button" value="Get Details">

    <br />
    <br />
    <div id="info" style="padding:5px; margin:5px; background-color:#eee; height:680px;">
    </div>
      </div>

     <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'">
     <div style="position:absolute; right:22px; top:23px; z-Index:999;">
          <div data-dojo-type="dijit/TitlePane"
               data-dojo-props="title:'Switch Basemap', closable:false, open:false">
            <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery" ></div></div>
          </div>
        </div>

      </div>

</div>

    </div>
</body>
</html>

[/HTML]

KenBurcham · ‎09-17-2013

Hi ionara_wilson,

The problem appears to be that the require statements don't all have corresponding variables in the function. Perhaps the dijit requires were added to the former but not the latter.

So instead of:

require([
        "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",

        "esri/toolbars/edit", 

        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",
  "esri/tasks/query", "esri/tasks/QueryTask",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor", 
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi", 


        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",  
        "dojo/dom", "dojo/on",

        "dojo/domReady!",
 
      ], function(
        Map, BasemapGallery, arcgisUtils, Edit, 
        ArcGISTiledMapServiceLayer, FeatureLayer,
  Query, QueryTask,
        SimpleMarkerSymbol, SimpleLineSymbol, 
        Editor, TemplatePicker, 
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys,  
        dom, on
      ) {

You should add in those corresponding variables in the function signature:

require([
        "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",

        "esri/toolbars/edit", 

        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",
  "esri/tasks/query", "esri/tasks/QueryTask",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor", 
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi", 


        "dojo/_base/array", "dojo/parser", "dojo/keys",
  

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",

        "dojo/dom", "dojo/on",

        "dojo/domReady!",
 
      ], function(
        Map, BasemapGallery, arcgisUtils, Edit, 
        ArcGISTiledMapServiceLayer, FeatureLayer,
  Query, QueryTask,
        SimpleMarkerSymbol, SimpleLineSymbol, 
        Editor, TemplatePicker, 
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys,  
borderContainer, contentPane, titlePane,
        dom, on
      ) {

I've done that SO many times.

take care!

ken.

View solution in original post

KenBurcham · ‎09-17-2013

Hi ionara_wilson,

The problem appears to be that the require statements don't all have corresponding variables in the function. Perhaps the dijit requires were added to the former but not the latter.

So instead of:

require([
        "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",

        "esri/toolbars/edit", 

        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",
  "esri/tasks/query", "esri/tasks/QueryTask",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor", 
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi", 


        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",  
        "dojo/dom", "dojo/on",

        "dojo/domReady!",
 
      ], function(
        Map, BasemapGallery, arcgisUtils, Edit, 
        ArcGISTiledMapServiceLayer, FeatureLayer,
  Query, QueryTask,
        SimpleMarkerSymbol, SimpleLineSymbol, 
        Editor, TemplatePicker, 
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys,  
        dom, on
      ) {

You should add in those corresponding variables in the function signature:

require([
        "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",

        "esri/toolbars/edit", 

        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",
  "esri/tasks/query", "esri/tasks/QueryTask",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor", 
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi", 


        "dojo/_base/array", "dojo/parser", "dojo/keys",
  

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",

        "dojo/dom", "dojo/on",

        "dojo/domReady!",
 
      ], function(
        Map, BasemapGallery, arcgisUtils, Edit, 
        ArcGISTiledMapServiceLayer, FeatureLayer,
  Query, QueryTask,
        SimpleMarkerSymbol, SimpleLineSymbol, 
        Editor, TemplatePicker, 
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys,  
borderContainer, contentPane, titlePane,
        dom, on
      ) {

I've done that SO many times.

take care!

ken.

ionarawilson1 · ‎09-17-2013

Bingo! Thank you so much Ken! You are my hero. This was driving me crazy, I had tried everything I could imagine!

Thank you !!!

KenBuja · ‎09-17-2013

duplicate content

KenBurcham · ‎09-17-2013

Hehe. I've done that so many times, like I said. I think that whole loader pattern is one of the weaknesses of the whole AMD motif. Requires too much maintenance and so easy to mess up!

Take care,

ken.