AnsweredAssumed Answered

Query data without a map does not work

Question asked by ionarawilson on Sep 17, 2013
Latest reply on Sep 17, 2013 by kenburcham
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">
    <!--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>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[i].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]

Outcomes