nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Bug with dojo/on is version 3.7

ShawnHolyoak

In upgrading my application to version 3.7 of the api, I've run into what I believe is a bug. When I try to connect to the layers-add-result event for my map, I try to use the dojo/on amd method. My code for that is:

on(map, "layers-add-result", function(e) {   var toc = new agsjs.dijit.TOC({    map: map,    layerInfos:legendLayers   }, 'legendDiv');   toc.startup();  });

That returns an error "TypeError: Cannot read property 'tagName' of undefined ". When I try using the old dojo.connect method, though, everything works. My code using the old dojo.connect is:

dojo.connect(map,'onLayersAddResult', function(results){   var toc = new agsjs.dijit.TOC({    map: map,    layerInfos:legendLayers   }, 'legendDiv');   toc.startup();  });

According to the documents, version 3.7 is using dojo version 1.9.1, which should certainly support the dojo/on functionality. What, if anything, am I doing wrong. If I'm not doing anything wrong, how do I file a bug report?

Find more posts tagged with

Accepted answers

JeffPace1

I:

1. create map
2. add layers
3. create toc on the "layers-add" event

this.map = new Map("map", {                                     infoWindow: popup,                                     basemap: "streets",                                     autoResize: true,                                     sliderStyle: style,                                     logo: false,                                     showAttribution: false,                                     lods: lods                                 });                                 map = this.map;     var tocAdder = map.on('layers-add-result', lang.hitch(this, function(results) {                                     // alert('in onlayeradd');                                     if (!this.toc) {                                         this.toc = new agsjs.dijit.TOC({                                             map: map,                                             layerInfos: layerInfos.reverse()                                         }, 'tocDiv');                                          toc = this.toc;                                         toc.startup();                                          lang.hitch(this, createLegend());

All comments

AleydisG__Pere

Checking the differences in the documentation. Both work.

on(navToolbar, "ExtentHistoryChange", extentHistoryChangeHandler);

navToolbar.on("extent-history-change", extentHistoryChangeHandler);

The same goes for on(map,...)/map.on(...):

on(map, "LayersAddResult", function(e));

map.on("layers-add-result", function(e));

ShawnHolyoak

feel free to post a simple sample. i'd be happy to take a look.

I appreciate that, but as we discovered earlier (see the thread above), I had no problems with the api in jsfiddle. The simple samples are easy. It's when trying to put everything together in a large application that it gets difficult.

JohnGravois

feel free to post a simple sample. i'd be happy to take a look.

ShawnHolyoak

i guess now i disagree with you on two counts. 🙂 i did a quick check modifying this sample and had no trouble wiring up the navigation toolbar's sole on style event handler.
navToolbar.on("extent-history-change", extentHistoryChangeHandler);
...
function extentHistoryChangeHandler() {
        console.log("fired");
 dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
}
with regard to Dojo 'allowing' on style events in 1.9x. using a Dojo method would only be necessary for a DOM node that didn't already have a listener defined.

since the map class is already 'evented', you should simply use the method thats already present.

consider that a strong opinion, weakly held 🙂

It may simply be I don't understand either dojo or the jsapi well enough yet, because I received a "object nav has no method on" error when I tried that, whereas with the

on(nav, 'extent-history-change', _this.extentHistoryChanged);

approach, it worked which of course is the opposite of what led me to post this question originally. Basically, in certain situations one works while the other doesn't, and in other situations it's the reverse, probably related to the asynchronous nature of the api. Pretty frustrating for those of us that are simply trying to keep up...

JohnGravois

i guess now i disagree with you on two counts. 🙂 i did a quick check modifying this sample and had no trouble wiring up the navigation toolbar's sole on style event handler.

navToolbar.on("extent-history-change", extentHistoryChangeHandler);
...
function extentHistoryChangeHandler() {
        console.log("fired");
 dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
}

with regard to Dojo 'allowing' on style events in 1.9x. using a Dojo method would only be necessary for a DOM node that didn't already have a listener defined.

since the map class is already 'evented', you should simply use the method thats already present.

consider that a strong opinion, weakly held 🙂

ShawnHolyoak

since the map class itself is evented, i'm not sure I understand the need to try and use 'dojo/on' to handle event wiring.

@tracy. also not sure whats causing your problem.

Because esri says it uses dojo 1.9.1 which allows it, but more importantly, not all esri objects seem to be evented (e.g., the navigation toolbar).

TracySchloss

That turned out to be operator error. I had changed around the location of one of my services yesterday to be in the subfolder where it belonged. Since the layer wasn't really valid, then onLayersAddResult never fired.

I thought I'd changed all the places I used the layer, but I missed one. I'm developing my own mental list of Murphy's Laws. If you are 100% certain you've identified the line of code where your problem lies, there is a 100% certainty your problem lies elsewhere.

JohnGravois

since the map class itself is evented, i'm not sure I understand the need to try and use 'dojo/on' to handle event wiring.

@tracy. also not sure whats causing your problem.

TracySchloss

I'm having an issue today with something similar, but my code is slightly older, 3.4. I have made no changes at all to this code for over a week and it was working as of yesterday. I have a dojo.connect on the map for onLayersAddResult, which is used to create the toc.

      map.addLayers([eezLayer, eezFeatureLayer]);  

  dojo.connect(map, 'onLayersAddResult', function(results) {
        var toc = new agsjs.dijit.TOC({
          map: map,
          layerInfos: [{
             layer: eezLayer,
            title: "Enhanced Enterprise Zones",
            slider:true 
          },{
            layer: districtLayer,
            title: "Legislative Districts"
          }]
        }, 'tocDiv');
        toc.startup();  
      });

This never executes because it never detects the onLayersAddResult event has fired. I'm completely baffled. This code has been in test for a month and today it suddenly decided not to work?!

The layers do get added, but I have no TOC because of this.

JeffPace1

here's my version of it

http://www.mymanatee.org/gisapps/mapviewer/mobile/mobiletest.html

Warning: site in development

I made a couple small tweaks to it, and added functionality of loading layers from a set of json files.

You can change the layers that are currently loaded on the "settings" tab

JonathanUihlein

+1 to Jeff; he beat me to it!

@Holyoaks, when you find the final solution to your problem, make sure you mark this thread as answered.
Many people use nliu's TOC widget (it's great!) and this is a useful thread in case anyone runs into a similar problem.

JeffPace1

I:

1. create map
2. add layers
3. create toc on the "layers-add" event

this.map = new Map("map", {                                     infoWindow: popup,                                     basemap: "streets",                                     autoResize: true,                                     sliderStyle: style,                                     logo: false,                                     showAttribution: false,                                     lods: lods                                 });                                 map = this.map;     var tocAdder = map.on('layers-add-result', lang.hitch(this, function(results) {                                     // alert('in onlayeradd');                                     if (!this.toc) {                                         this.toc = new agsjs.dijit.TOC({                                             map: map,                                             layerInfos: layerInfos.reverse()                                         }, 'tocDiv');                                          toc = this.toc;                                         toc.startup();                                          lang.hitch(this, createLegend());

ShawnHolyoak

OK great! We've narrowed it down.
I would try initializing the TOC before my ready and parser calls, to make sure it's accessible when the page first loads.

I don't think I can do that. The TOC requires the map and an array of layers for its constructor, and since the map requires the divId to be created, I have to do that after domReady!, no?

JonathanUihlein

Hmm. I can't replicate it http://jsfiddle.net/NcCWw/7/. It's working in this instance. Just not working with my full code. I suppose it's possible that it's the TOC widget I'm using that's causing the issue.

OK great! We've narrowed it down.
I would try initializing the TOC before my ready and parser calls, to make sure it's accessible when the page first loads.

ShawnHolyoak

Hmmm... could you replicate the issue with http://jsfiddle.net/ so I can take a look at your code?

Hmm. I can't replicate it http://jsfiddle.net/NcCWw/7/. It's working in this instance. Just not working with my full code. I suppose it's possible that it's the TOC widget I'm using that's causing the issue.

JonathanUihlein

No. The event isn't fired. The error seems to be in attaching the event to the map.

Hmmm... could you replicate the issue with http://jsfiddle.net/ so I can take a look at your code?

ShawnHolyoak

i have noticed similar issues with layers add

map.on works, on(map style does not

How do I file a bug report?

ShawnHolyoak

Are you able to fire the event with a simple console.log in the function block, like in this jsfiddle?

http://jsfiddle.net/NcCWw/

*edit

Also, you should probably be creating the TOC object earlier on in your code (preferably before the parser runs). You can still start it up inside your event.

No. The event isn't fired. The error seems to be in attaching the event handler to the map.

JeffPace1

i have noticed similar issues with layers add

map.on works, on(map style does not

JonathanUihlein

Are you able to fire the event with a simple console.log in the function block, like in this jsfiddle?

http://jsfiddle.net/NcCWw/

*edit

Also, you should probably be creating the TOC object earlier on in your code (preferably before the parser runs). You can still start it up inside your event.

ShawnHolyoak

Both are valid.
map.on("layers-add-result", function(e) {
//stuff
});

on(map, "layers-add-result", function(e) {
//stuff
});
Does the event fire?

What happens when you wrap the problematic code in a try/catch?

The error is caught, with the message originally mentioned, "Cannot read property 'tagName' of undefined". map.on(), though, as suggested by mattlane86, also works properly. So it seems it's the on(target, event, listener) style that is returning the error.

JonathanUihlein

Both are valid.

map.on("layers-add-result", function(e) {
//stuff
});

on(map, "layers-add-result", function(e) {
//stuff
});

In that document holyoaks linked, there is another document linked at the bottom that discusses both uses.
https://dojotoolkit.org/reference-guide/1.9/dojo/Evented.html#dojo-evented

Map is an object that fires its own events, as explained here:
https://developers.arcgis.com/en/javascript/jsapi/map-amd.html

Now, onto troubleshooting...
Does the event fire?
What happens when you wrap the problematic code in a try/catch?

ShawnHolyoak

Not according to the dojo/on documentation, https://dojotoolkit.org/reference-guide/1.9/dojo/on.html

MattLane

Should it not be

map.on("layers-add-result", function(e) {
...

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.