getting a TypeError

joepublic · ‎10-18-2014

I am still new to esri's js-api. I am getting the error below at line 149 (queryTask.execute(cntryq);) in the attached file.

I have no idea how to resolve this error

TypeError {stack: "TypeError: undefined is not a function↵ at coun…ndler (http://js.arcgis.com/3.10/init.js:490:212)", message: "undefined is not a function"}

message: "undefined is not a function"
stack: "TypeError: undefined is not a function↵ at countries (http://tobagoborn.com/esri/examples/p1p2c.html:149:15)↵ at cntrycds (http://tobagoborn.com/esri/examples/p1p2c.html:163:5)↵ at http://tobagoborn.com/esri/examples/p1p2c.html:179:7↵ at S._resolve (http://js.arcgis.com/3.10/js/esri/layers/FeatureLayer.js:64:294)↵ at k (http://js.arcgis.com/3.10/js/esri/layers/FeatureLayer.js:65:355)↵ at c (http://js.arcgis.com/3.10/init.js:74:221)↵ at d (http://js.arcgis.com/3.10/init.js:74:10)↵ at resolve.callback (http://js.arcgis.com/3.10/init.js:75:350)↵ at Object.n._resDfd (http://js.arcgis.com/3.10/init.js:758:31)↵ at e._successHandler (http://js.arcgis.com/3.10/init.js:490:212)"

MatthewLewis · ‎10-23-2014

Glad to hear you solved the issue. Could you post the solution so others will benefit when they look at this in the future?

An onclick event can be done in a number of ways. I've highlighted two of the simplest below.

1) in the HTML - W3School

<button onclick="myFunction()">Click me</button>

2) using an dojo on click event - Working with events | Guide | ArcGIS API for JavaScript ‌

map.on("click", myClickHandler);

OR some thing like the following.

registry.byId("zoomprev").on("click", function () {
// do what you want here.
});

joepublic · ‎10-23-2014

I did not explain what I want clearly.

Here is a scenario: I click on the project map button and the country USA is highlighted. I want to click on the USA which will in turn triggers a query of the related table (tableURL)

In my script I have a function (countries()) that executes a queryTask and a map.graphics.add(graphic) that adds the highlighted countries layer.

So next I use either map.on("click", myClickHandler) or dojo.connect(map, "onClick", myClickHandler); with a function myClickHandler(){ query of related table goes here }

My question: How do I tell it which country I clicked on and execute the relatedQuery?

----------------------------------------------------------------------------------------------------------------------------------

Solution to the typeError:

Make sure the order of the items in the require array matches the items in the associated function

require([

"esri/map",

"esri/tasks/query",

"esri/layers/FeatureLayer",

"esri/tasks/QueryTask",

"esri/tasks/RelationshipQuery",

"dojo/domReady!"

], function(Map,Query, FeatureLayer, QueryTask, RelationshipQuery)

joepublic · ‎10-23-2014

I added an updated script to my original post

RobertScheitlin__GISP · ‎10-23-2014

Joe,

All you need to do is attach a click event to the maps graphics.

<!DOCTYPE html>
<!-- ADDING A FEATURE LAYER  AND DISPLAYING COUNTRIES-->
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>Feature layer part one</title>
      <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
      <script src="http://js.arcgis.com/3.10/"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   
      <style>
      html, body,  #container
      {
        width : 100%;
        height : 100%;
        background-color: #FFF;
      }
      #container, div
      {
        float: left;
        /*border-style:solid;
        border-style:solid;
        border-width:5px;
        border-color:green;*/
      }
   
      #mapDiv
      {
        width:  100%;
        height:  100%;
        width : 75%;
        margin:  0;
        padding: 0;
      }
      #sidecol
      {
        width : 25%;
        height: 100%;
        border-width: 5px;
        border-color:green;
        overflow: scroll;
      }
      </style>
  </head>
  <body class="claro">
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default" id="NSM" value="NSM">News</button>
    <button type="button" class="btn btn-default" id="SDG" value="SDG">SDG Status</button>
    <button type="button" class="btn btn-default" id="CMP" value ="CMP">City Models/Plans</button>
    <button type="button" class="btn btn-default" id="CSM" value ="CSM">Story Maps</button>
    <button type="button" class="btn btn-default" id="EDU" value ="EDU">Educational Games</button>
    <button type="button" class="btn btn-default" id="USR" value ="USR">User Submitted</button>
    <button type="button" class="btn btn-default" id="OPM" value ="OPM">Project Map</button>
    <!-- button type="button" class="btn btn-default">Create a new map</button>
    <button type="button" class="btn btn-default">MDG Status</button -->
  </div>


  <div name="container" id="container">
    <div id="mapDiv"></div>
    <div id="sidecol"> </div>
  </div>

  <script>
    var countries;
    var buttonPicked;
    var buttonType;
    var countryCode = [];
    var whrString = ""
    var map, featureLayer, relatedTable;

    var map, featureLayer, relatedTable;
    var featureURL = "http://dev.consciousglobalchange.org/arcgis/rest/services/MEP/webmap_catalog/FeatureServer/0";
    var relatedURL = "http://dev.consciousglobalchange.org/arcgis/rest/services/MEP/webmap_catalog/FeatureServer/1";

        require(["esri/map", "dojo/domReady!"], function(Map)
        {
            map = new Map("mapDiv",
            {
                center: [-5.049, 38.485],
                zoom: 2,
                basemap: "gray"
            });
        });


    function clickType(e) {
      if (!relatedTable)
      {
        // The related table hasn't loaded properly yet. Abort!
        alert("Still waiting to connect to the related table.");
        return;
      }

      // "this" refers to the button that was clicked, since this is function added to onClick.
      // "value" reads the "value" attribute from the button.
      var type = this.value;
      require([ //"esri/tasks/query"
      "esri/map",
      "esri/tasks/query",
      "esri/layers/FeatureLayer",
      "esri/tasks/QueryTask",
      "dojo/on",
      "esri/tasks/RelationshipQuery",
      "dojo/domReady!"
      ], function(Map, Query, FeatureLayer, QueryTask, on, RelationshipQuery)
      {
        var q = new Query();  //Pull UN Country Code
        q.outFields = ["*"];
        q.where = "TYPE = '" + type + "'";
        q.outFields = ["un_country"];

        function countries(uncode)
        {
            //build query task
            alert( 'country codes: ' + uncode);
            var queryTask = new QueryTask(featureURL);
            //build query filter
            var cntryq = new Query();
            cntryq.returnGeometry = true;
            cntryq.outFields = ["*"];
            cntryq.where =    "UN in (" + uncode + ")";

            //Can listen for onComplete event to process results or
            //can use the callback option in the queryTask.execute method.
            dojo.connect(queryTask, "onComplete", function(featureSet)
            {
                map.graphics.clear();
                var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));

                //QueryTask returns a featureSet.  Loop through features
                //in the featureSet and add them to the map.
                var data = featureSet.features;
                console.log(data);

                dojo.forEach(data,function(feature)
                {
                    var graphic = feature;
                    graphic.setSymbol(symbol);
                    map.graphics.add(graphic);
                    map.graphics.on('click', function(evt){
                        console.log(evt.graphic.attributes);
                    });
                });
            });

            queryTask.execute(cntryq);
            whrString = ""
        } //end of Countries

        function cntrycds(allcds)
        {
          //alert(allcds);
          whrString = ""
          for (var i = 0; i < allcds.length; i++)
          {
              //alert(allcds);
              whrString += allcds + ", ";
          }
          whrString = whrString.slice(0, -2); 
          countries(whrString);
          //alert(allcds);
        }

        relatedTable.queryFeatures(q, function(featureSet)
        {
          countryCode = [];
          //console.log(featureSet.features);
          var data = featureSet.features;
          for (i = 0; i < data.length; i++)
          {
            countryCode = data.attributes.un_country;
            //console.log(data.attributes.un_country);
            //alert(countryCode);
          }
          cntrycds(countryCode);
        });
      });  //end of require
    } //end clickType

    require([
      "esri/map",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/tasks/query",
      "esri/tasks/QueryTask",
      "dojo/on",
      "esri/tasks/RelationshipQuery",
      "dojo/domReady!"
      ], function(Map, ArcGISTiledMapServiceLayer, FeatureLayer, Query, QueryTask, on, RelationshipQuery) 
      {
        var table = new FeatureLayer(relatedURL,
        {
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
        });

        table.on("load", function (e)
        {
            // The layer is now loaded and is ready to be used for queries etc.
            relatedTable = e.layer;
        });
    }); //end require

    $('#NSM').click(clickType);
    $('#SDG').click(clickType);
    $('#CMP').click(clickType);
    $('#CSM').click(clickType);
    $('#EDU').click(clickType);
    $('#USR').click(clickType);
    $('#OPM').click(clickType);
  </script>
  </body>
</html>

With the click vent on the graphics layer you can get the exact graphic clicked and thus it's attributes that would have the information on which country was clicked.

I did not check the rest of your codes logic.

joepublic · ‎10-23-2014

Robert,

Thanks for the simple solution to clicking on the country. Now I want to query the related table.

I created a function tableRecords() that is called when you click on a country.

I know that I have to use the objectid to find all the records in the related table. How do I write the query

to find the records and display the results in the side panel div

function tableRecords(evt)

{

console.log(evt.graphic.attributes);

//alert(evt.graphic.attributes.OBJECTID);

var relatedQ = new esri.tasks.RelationshipQuery();

relatedQ.outFields = ["*"];

relatedQ.relationshipId = 0;

relatedQ.objectIds = [evt.graphic.attributes.OBJECTID];

relatedTable.queryRelatedFeatures(relatedQ, function(relatedRecords)

{

var tableObjId = relatedRecords[evt.graphic.attributes.OBJECTID];

console.log(tableObjId);

});

} //end tableRecords

see attached