I cannot go into change mode for dijit.form.Select

Question

It seems that I cannot properly bind the onchange event to the dijit.form.Select widget. However, I am new to web development, so I could do something completely idiotic (although as far as I can tell (and I read all the documents I could find), I don’t). I made sure that the body class matches the dojo theme, that I dojo.require () for all the widgets that I use (and dojo.parser), and still nada. The code I'm using is:

dojo.addOnLoad(function () { var _query = dojo.query('.toggle'); for (var i in _query) { dojo.connect(_query[i], 'onchange', function (ev) { console.log(ev + ' fired onchange'); }); } }); 

Any help at all would be appreciated.

Addendum: after digging more in the interior of how dijit renders widgets, I find that when I add a couple of dojoType = 'dijit.form.Select' attributes to my html element (doing it declaratively), dijit actually displays a single-line table with two columns. The first element of the table is the span (with the dijitSelectLabel class), which I assume simply displays the selected (or default) element. The second element looks like a button, displayed as a down arrow, which toggles the display of the itmes menu in response to certain DOM events. Also (and I thought that was pretty elegant), dijit doesn't actually put the selection options in the DOM tree until one of these events happens. I looked at the HTML in firebug right after the new pageload (before I clicked on anything), and the second option was not found anywhere. Then, as soon as I click on the arrow button, there is a dijit.Menu widget, dijit sticks dijit.Menu to the end of the node body; after clicking elsewhere, the menu widget is still the body of lastChild, now it is just hidden and not attached to the form. Select a widget.

Should it be really complicated if all I want to do is place another dijit.form widget in the DOM tree depending on which element the user selects?

Conclusion: It turns out that this was a capitalization problem.

 dojo.connect(widget_obj, 'onChange', function_obj); 

works whereas

 dojo.connect(widget_obj, 'onChange', function_obj); 

not.

Therefore, I was right that I was completely stupid. I assumed that since the entire lower case version works when putting an html tag in it as an attribute, this dojo will treat it the same way. This makes sense because dijit.form.Select does not have an .onchange attribute, but it has a .onChange attribute. (I ended up sticking with .Select over .FilteringSelect because I don't want my users to have the impression that they can enter something.) So, which of you guys I give the answer ( because you both had onChange in your posts, I think I was too inexperienced to understand that the matter mattered)?

Answer 1

Try the following: dojo.connect:

  var inputEvents = []; //Global var inputEvents.push(dojo.connect(dijit.byId(inputFldStr), "onChange", eventFuncObj)); 

Save the connection in the global var.

Answer 2

If someone else finds this page through a web search, you may have made the same mistake as me .. copying your markup so that everyone has the same value.

eg.

 <select dojoType='dijit.form.Select' onChange="fn"> <option value='foo'>Foo 1</option> <option value='foo'>Foo 2</option> <option value='foo'>Foo 3</option> </select> 

fn () will never be called because the code of the change handler checks the new value for the previously selected value and does not start onChange if it has not changed.

Answer 3

In your code, you attach the handler to the onchange event for dom nodes, and not to dojo widgets. dojo.query returns a NodeList object - a set of nodes matching the query. In this case, it is more reliable to connect to the widget 'onChange' event, as GoinOff showed. Just add it to your answer to make sure you do it.
Suppose this is your html (in later versions of dojo dijit.form.Select has been replaced by dijit.form.FilteringSelect):

 <input dojoType="dijit.form.FilteringSelect" id="stateInput" store="stateStore" searchAttr="name" name="state"/> 

Then you connect to 'onChange' this way (you can also save the connection in some kind of array so that you can disconnect it later, as GoinOff suggested):

 dojo.addOnLoad (function () { dojo.connect(dijit.byId("stateInput"), "onChange", function(){}); } 

But this is another story if you don’t know your widget ID and want to use dojo.query to connect to multiple widgets.