registry.byId("search").on("click", myFunction) not working

6547
6
Jump to solution
07-11-2014 08:59 AM
JohnChurchill
New Contributor III

I am attempting to merge this sample into an existing script where I am using the identify tool and making selections etc.

Show find task results in a DataGrid | ArcGIS API for JavaScript

https://developers.arcgis.com/javascript/jssamples/find_map_datagrid.html

The sample has a search for parcel functionality that is just what I want though I'm adapting it to search for roads in a street centerlines layer.

Chrome's javascript console tells me this which is one clue

Cannot read property 'on' of undefined

Where I'm getting this is on this line here

registry.byId("search").on("click", doFind);

Which is exactly how it is used in the sample. Here is how the "require" part starts out ... I also have a button control with the id "search" just as in the sample I linked to above (see html code posted below the require code). Can anyone see where I could be going wrong ?

when the line of code above registry.byId ... is NOT commented out, the html bit below goes away. When I comment it out, I see the search control and the table.

I also tried other methods to "connect" the click event to the search button but they don't work either. I have all the other code from the sample in there (such as the doFind function) which should run when the button is clicked.

Any ideas why this is not working ?

<code>

<script src="http://js.arcgis.com/3.9/"></script>
<script>
var findTask, findParams; // *
var map, center, zoom; // * center and zoom are new
var grid, store; // *
var identifyTask, identifyParams;  
require([
  "esri/map",
  "esri/dijit/BasemapGallery",
  "esri/dijit/Popup",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/tasks/query",
  "esri/toolbars/draw",
  "esri/tasks/IdentifyTask",
  "esri/tasks/FindTask",
  "esri/tasks/FindParameters",
  "esri/layers/FeatureLayer",
  "esri/tasks/IdentifyResult",
  "esri/tasks/IdentifyParameters",
  "esri/dijit/InfoWindow",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/InfoTemplate",
  "dojo/_base/array",
  "dojo/_base/Color",
  "dojo/dom",
  "dojo/on",
  "dijit/registry",
  "dojo/parser",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/TitlePane",
  "dijit/form/Button",
  "dijit/form/RadioButton",
  // "dojo/parser",
  "dojo/domReady!"
  ], function(Map, BasemapGallery, Popup, ArcGISDynamicMapServiceLayer, Query, Draw, IdentifyTask, FindTask, FindParameters, FeatureLayer, IdentifyResult, IdentifyParameters, InfoWindow,
    SimpleFillSymbol, SimpleLineSymbol, InfoTemplate, arrayUtil, Color, dom, on, registry, parser, BorderContainer, ContentPane, TitlePane, Button, RadioButton) {
//setup the popup window
    parser.parse();
  
    // *
    registry.byId("search").on("click", doFind);
    // on(dom.byId("search"), "click", doFind);
    // mapOnLoad = dojo.connect("search", "click", doFind);

</code>

<code>

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:190px;">
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="height:30px; margin-top: 0;">
  Road name: <input type="text" id="ownerName" size="60" value="ROCK LODGE RD" />
      <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search 
      </button>
  </div>

<table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'15', rowSelector:'20px'">
  <thead>
    <tr>
      <!--<th field="PARCELID">Parcel ID</th>-->
      <th field="STREET_ALL">NAME</th>
      <!--<th field="OWNERNME1" >Owner 1</th>-->
      <th width="120px" field="MAINTENANCE">MAINTENANCE</th>
      <!--<th field="OWNERNME2">Owner 2</th>-->
      <th field="FROM_LEFT_P" >FROM LEFT</th>
      <th field="TO_LEFT_P">TO LEFT</th>
      <th width="130px" field="FROM_RIGHT_P">FROM RIGHT</th>
      <th field="TO_RIGHT_P">TO RIGHT</th>
      <!--<th field="RESYRBLT ">Year Built</th>--?
      <!--<th field="SITEADDRESS" width="100%">Address</th>-->
    </tr>
  </thead>
</table>
</div>

</code>

0 Kudos
1 Solution

Accepted Solutions
LuciHawkins
Occasional Contributor III

Hey John,

Add   "dojox/grid/DataGrid" to your require statement and  "DataGrid"  to your functions and see if that clears up the random errors.

Luci 

View solution in original post

6 Replies
KenBuja
MVP Esteemed Contributor

What that error was telling you was in that the object wasn't ready by the time the code wanted to listen for its event. The first time I ran your code, it gave me that error, but subsequent runs would only occasionally throw that error.

By the way, you should add the javascript tag to your post to get more people to view it and to be able to search on it.

BrandonColeman
New Contributor III

I agree with Ken Buja.  Double check your order.  Other than that....

I have been using dom.byId("MY DIV") instead of using the Registry, and I haven't had problems.  I have my event listeners attach after I load my map though, since that is the piece that seems to take the longest to load.  I assume if that is loaded then everything else should be.

I have had my listeners set like you have commented out (on(dom.byId('mapTips'), 'click', function(){});).  It might be something with it being a Dijit button though.  I would double check to make sure Dijit doesn't change the ID or anything of the button.  I know Dojo has added/changed class names of objects, but I don't think it touches IDs.  It won't hurt to double check in something like Chrome Dev Tools.  Also, although it might not matter, I have been doing everything with single quotes.  JavaScript/Dojo may be picky enough to not use double quotes.

I am just guessing at some of these scenarios as problems. 

LuciHawkins
Occasional Contributor III

Hey John,

Add   "dojox/grid/DataGrid" to your require statement and  "DataGrid"  to your functions and see if that clears up the random errors.

Luci 

JohnChurchill
New Contributor III

Thanks. I was missing that in the require. I noticed at the same time that I was also missing "dojo/data/ItemFileReadStore", so I've added that in. Now my map does load but for whatever reason I'm still getting an error in the javascript console that says "Uncaught TypeError: Cannot read property 'on' of undefined

". The map now doesn't load when I uncomment the line that says ... registry.byId("search").on("click", doFind); So I'm not out of the woods entirely. That was helpful though. I may need to go in and take things out to see if I can get the search functionality to start working. Thanks!

0 Kudos
LuciHawkins
Occasional Contributor III

In some instances I will put    onclick="doFind"    in the button declaration instead of in the code.

Luci

JohnChurchill
New Contributor III

I had tried that too which helped. I finally got this one fixed by taking bits of code out until the error disappeared. I had a couple of problems like functions that should have been inside the require section were outside the block. Thanks for your help.

0 Kudos