QueryTask and DataGrid problem

AbelLudba · ‎03-29-2015

Hello

I am new to ArcGIS JavaScript.

I'm using ArcGIS 10 and would like to publish results of a simple Query in a table.

This is my Code:

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Test QueryTask with Table</title>       <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/tundra/tundra.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }     </style>       <script src="http://js.arcgis.com/3.13/"></script>     <script>     var queryTaskTwo, queryTWO;         var grid, store;                require([           "dojo/parser",           "esri/tasks/query",    "esri/tasks/QueryTask",    "dijit/registry",         "dojo/_base/array",         "dojo/dom",          "dojo/on",           "dojo/_base/connect",         "dojox/grid/DataGrid",         "dojo/data/ItemFileReadStore",         "dijit/form/Button",                 "dijit/layout/BorderContainer",         "dijit/layout/ContentPane",         "dojo/domReady!"       ],     function (parser, Query, QueryTask, registry, arrayUtils, dom, on, DataGrid, ItemFileReadStore) {       parser.parse();             queryTaskTwo=new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5")    queryTWO=new Query();    queryTWO.returnGeometry=false;    queryTWO.outFields=["STATE_NAME","POP00_SQMI","HOUSEHOLDS","BLACK","MALES"];                  on(dom.byId("execute"), "click", execute);           function execute ()    {         queryTWO.text = dom.byId("stateName").value;           queryTaskTwo.execute(queryTWO,showResultsTwo );    //         }    function showResultsTwo(resultsTwo) {            //create array of attributes           var items = arrayUtils.map(resultsTwo, function (result)     {                  return result.feature.attributes;           });             //Create data object to be used in store           var data = {             identifier : "SQMI", //This field needs to have unique values             label : "SQMI", //Name field for display. Not pertinent to a grid but may be used elsewhere.             items : items           };             //Create data store and bind to grid.           store = new ItemFileReadStore({             data : data           });                var grid = dom.byId("grid");            grid.setStore(store);      grid.setQuery({ SQMI: "*" });         // .................................................             }       //       });     </script>   </head>     <body class="tundra">     US state name :     <input type="text" id="stateName" value="California">     <input id="execute" type="button" value="Get Details">     <br />     <br />      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">      <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">       <thead>         <tr>           <th field="SQMI"  width="10%">SQMI</th>           <th field="STATE_NAME" width="10%" >STATE_NAME1</th>           <th field="POP00_SQMI" width="30%" >SUB_REGION2</th>           <th field="HOUSEHOLDS" width="20%">AVG_SIZE97</th>           <th field="BLACK" width="10%">BLACK </th>           <th field="MALES" width="20%">OWNER_OCC</th>         </tr>       </thead>     </table>   </div>  </html>

when I run this code, I get this error:

TypeError: undefined is not a function {stack: (...), message: "undefined is not a function"} "TypeError: undefined is not a function at showResultsTwo (http://localhost/Dgrid/queryMultipleTest2.html:74:16)

I could not find what am I doing wrong?

Would it be possible to help?

Thanks

Abel

KenBuja · ‎03-31-2015

I have a made a few changes to your script and it's working as expected: JS Bin - Collaborative JavaScript Debugging

View solution in original post

KenBuja · ‎03-30-2015

You have a problem with the agreement of the modules in your require statement and the variable in your function. You left out "connect" between on and DataGrid.

require([    
    "dojo/parser",
    "esri/tasks/query",
    "esri/tasks/QueryTask",
"dijit/registry",
    "dojo/_base/array",
    "dojo/dom",
    "dojo/on",
    "dojo/_base/connect",
    "dojox/grid/DataGrid",
    "dojo/data/ItemFileReadStore",
    "dijit/form/Button",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
  ],   
function (parser, Query, QueryTask, registry, arrayUtils, dom, on, connect, DataGrid, ItemFileReadStore) {

AbelLudba · ‎03-30-2015

Hello

Thank you Ken for answering

I must be missing something: I copied and pasted your code and error is still there?

Is using QueryTask appropriate in this case? In two samples I saw they are using FindTask ?

I appreciate your help.

Thanks

Abdul

KenBuja · ‎03-31-2015

I have a made a few changes to your script and it's working as expected: JS Bin - Collaborative JavaScript Debugging

AbelLudba · ‎04-01-2015

Thank Ken.

I now know how important the way I import modules

Is there a way to learn about the order of requirements?

Thanks

Abel

KenBuja · ‎04-01-2015

This blog is a good primer on AMD (Asynchronous Module Definition). In addition to what it has to say about order of the modules in the require and the arguments in the function, you just have to remember that any modules that don't need an argument (like "dijit/form/Button" in your example) have to come after any modules that do need an argument. You can read more about AMD in Dojo here.

AbelLudba · ‎04-01-2015

Thanks.

Much appreciated.

Abel