query is undefined

MikeOnzay · ‎11-08-2011

I built this code from this example page here on how to use a querytask. I changed the fieldname being used in the where clause because the field in the example doesn't exist. I tested my query out using the query window in the services directory and it worked fine.

When I run this code I get "query is undefined". I don't know why.

<!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">
      dojo.require("esri.tasks.query");

 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 = true;
    query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"];

    //initialize InfoTemplate
    infoTemplate = new esri.InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}");

    //create symbol for selected features
    symbol = new esri.symbol.SimpleMarkerSymbol();
    symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
    symbol.setSize(10);
    symbol.setColor(new dojo.Color([255,255,0,0.5]));

  }

  function executeQueryTask(population) {
   //set query based on what user typed in for population;
    query.where = "POP1990 > " + population;

    //execute query
    queryTask.execute(query,showResults);
  }

  function showResults(featureSet) {
    //remove all graphics on the maps graphics layer
    map.graphics.clear();

    //Performance enhancer - assign featureSet array to a single variable.
    var resultFeatures = featureSet.features;

    //Loop through each feature returned
    for (var i=0, il=resultFeatures.length; i<il; i++) {
      //Get the current feature from the featureSet.
      //Feature is a graphic
      var graphic = resultFeatures;
      graphic.setSymbol(symbol);

      //Set the infoTemplate.
      graphic.setInfoTemplate(infoTemplate);

      //Add graphic to the map graphics layer.
      map.graphics.add(graphic);
    }
  }
</script>
  <body>
    <br/>
    US city population greater than : <input type="text" id="population" value="500000" />
    <input type="button" value="Get Details" onclick="executeQueryTask(dojo.byId('population').value);" />

    <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
    Click on a city once it's highlighted to get an InfoWindow.

  </body>

</html>

KellyHutchins · ‎11-08-2011

Mike,

The init function wasn't getting executed because the code is missing the following:

dojo.addOnLoad(init);

Here's a modified version that should work:

<!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">
      dojo.require("esri.tasks.query");

 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 = true;
    query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"];

    //initialize InfoTemplate
    infoTemplate = new esri.InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}");

    //create symbol for selected features
    symbol = new esri.symbol.SimpleMarkerSymbol();
    symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
    symbol.setSize(10);
    symbol.setColor(new dojo.Color([255,255,0,0.5]));

  }

  function executeQueryTask(population) {

   //set query based on what user typed in for population;
    query.where = "POP1990 > " + population;

    //execute query
    queryTask.execute(query,showResults);
  }

  function showResults(featureSet) {
    //remove all graphics on the maps graphics layer
    map.graphics.clear();

    //Performance enhancer - assign featureSet array to a single variable.
    var resultFeatures = featureSet.features;

    //Loop through each feature returned
    for (var i=0, il=resultFeatures.length; i<il; i++) {
      //Get the current feature from the featureSet.
      //Feature is a graphic
      var graphic = resultFeatures;
      graphic.setSymbol(symbol);

      //Set the infoTemplate.
      graphic.setInfoTemplate(infoTemplate);

      //Add graphic to the map graphics layer.
      map.graphics.add(graphic);
    }
  }
  dojo.addOnLoad(init);
</script>
  <body>
    <br/>
    US city population greater than : <input type="text" id="population" value="500000" />
    <input type="button" value="Get Details" onclick="executeQueryTask(dojo.byId('population').value);" />

    <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
    Click on a city once it's highlighted to get an InfoWindow.

  </body>

</html>

MikeOnzay · ‎11-08-2011

Thanks. I knew it had to be something simple. The fact that no map appeared at first should have been my first clue.