Dojo 1.10 ON event from select dropdown does not work

Question

I have the following select dropdown:

    <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-doprops="title:'Monuments', selected:true" >
        <select id="selSection" data-dojo-type="dijit/form/Select">
          <option value="0">Section</option>
          <option value="1">Gulf of Maine</option>   
          <option value="2">Passamaquoddy Bay</option>
          <option value="3">St. Croix River</option>
          <option value="4">North Line</option>
          <option value="5">St. John River</option>
          <option value="6">St. Francis River</option>
          <option value="25">The 49th Parallel, Columbia Valley to Pacific</option>
        </select>
      </div>

And I have the following on-event:

    var selSec = registry.byId("selSection");
    on(selSec, "Change", function(evt) {
     alert("test");
    });

But it doesn't seem to do anything. Where Am I going wrong? Thanks, Gido

In addition to @MiBrock answer, Are you parsing the widgets before calling the registry.byId function call? Can you show the entire code? — frank, Jul 15 '14 at 19:30
where and how are you calling the code that you have mentioned in the second snippet i.e `var selSec = registry.byId.......` can you edit this section. — frank, Jul 15 '14 at 20:01
I put it in the require block. The on-event capture works with a button, but not with the select. May-be something is wrong with my select widget? — Gido, Jul 15 '14 at 20:34

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

Have a look at these former SO-Post. It handles exactly the same Prob you are facing.

How do I programmatically change a select so that it fires its onchange behavior?

By the way: Have you checked if your selSec finds the right widget?

Regards, Miriam

edited May 23 '17 at 12:07

Community

1
1

answered Jul 15 '14 at 19:25

MiBrock

1,100
1
11
21

The on-event fires, within the JS, but not within the Dojo part. I just don't understand how one captures the on-event in the Dojo part. – Gido Jul 15 '14 at 20:03
@Gido Can you try to use the following. `selSec.on('change', function(evt) { alert('test'); console.log("onchange called"); });` – frank Jul 15 '14 at 20:13
That didn't complete loading the script; I got a "Uncaught TypeError: undefined is not a function" error. – Gido Jul 15 '14 at 21:15

score 0 · Answer 2 · answered Jul 15 '14 at 20:35

0

It's working fine in this fiddle, though it's recommended not to be using the dojo/on to capture widget based events (like the onChange from the dijit/form/Select).

The more recommended approach of capturing that event is by using the dijit/form/Select::on() function, for example:

registry.byId("selSection").on("change", function() {
    // Do something
});

Back to your issue, make sure that you're waiting until the widgets on the page are parsed by using the dojo/ready module.

Also make sure that you have configured dojo to parse widgets when the DOM is ready by setting parseOnLoad: true. Finally, make sure your require() function is correct by checking the following:

The modules loaded are in the same order as the variables inside the require() callback
You're loading dijit/layout/ContentPane and dijit/form/Select (they're necessary as well, even when you use declarative markup)
You're loading the dojo/parser module, which is necessary to parse widgets on the DOM.

answered Jul 15 '14 at 20:35

g00glen00b

38,039
13
89
120

Here comes the master dojo(Dimitri) ;-) – frank Jul 15 '14 at 20:37
I tried the registry approach; but that didn't even complete the loading. I think I did all the rest you pointed out; even though I am very new to Dojo stuff. The on-event works actually very well with an image array that I am using. – Gido Jul 15 '14 at 20:53
If it didn't complete the loading, then I think you're not waiting for the page to complete parsing the widgets. Are you sure you're wrapping your calls inside the `ready()` function? Also check your browser console for errors. – g00glen00b Jul 16 '14 at 05:45
I also tried the `dijit/registry::on()` approach on the fiddle, same result, it works fine there: http://jsfiddle.net/SbZ9y/1/ So I'm pretty sure the error is somewhere else (not waiting long enough, not loading the correct modules, ...). However, without the code necessary to reproduce the problem, we cannot help you further and we can only guess what the problem is. – g00glen00b Jul 16 '14 at 05:49

Dojo 1.10 ON event from select dropdown does not work

2 Answers2