dojo.connect(object, "onchange", function) does not work in IE7.
This code replicates it. The utterly bizarre thing is that if I remove the dojo.require of dijit.form.Form and dijit.form.ValidationTextBox, the dojo.connect will work. The form looks ugly, as expected, but the event handler works.
Also, only onchange is a problem -- onclick works with no problems. I tried grepping the tests to find a dojo.connect with onchange, but I can't find one.
Am I doing something wrong in the below example, or should I submit a bug?
<head>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"></META>
<style type="text/css">
@import "/static/dojo/dojo/resources/dojo.css";
@import "/static/dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="/static/dojo/dojo/dojo.js"
djconfig="isDebug: false, parseOnLoad: true, usePlainJson: true">
// usePlainJson stops JSON warning messages about not using comment filtered JSON
</script>
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.form.ValidationTextBox");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
function foo() { alert("A click upon your houses!"); }
function globalGuy() { console.debug("Global Guy fired!"); }
var someObject = {
bar: function() { console.debug("Bar fired!"); return 7; },
baz: function() { console.debug("Baz fired!"); return 14; }
}
var anotherObject = {
afterBaz: function () { console.debug("afterBaz fired!"); }
}
var firstLinkNode = dojo.byId('firstLink');
var firstLinkConnections = [];
firstLinkConnections[0] = dojo.connect(firstLinkNode, 'onclick', foo);
var handle = dojo.connect(dojo.byId('price'), 'onchange', foo);
});
</script>
</head>
<body class="tundra">
<a id="firstLink" href="http://dojotoolkit.org/">Dojo</a> is an excellent tool kit.
<form name="the_form" id="the_form" dojoType="dijit.form.Form">
The input <input name="price" type="text" dojoType="dijit.form.ValidationTextBox" id="price" />
</form>
</body>
Further investigation
I have experimented further and found that the connection is actually not being made. I put a "debugger;" line in function foo() and it is triggered if the event is onclick, but not if the event is onchange (I have Microsoft script debugger installed)
you likely want
you likely want dijit.byId("price") and "onChange" (the dijit version of 'onchange'). Dom events are lowercase, Dijit events a mixedCase.
Here's a bit on dijit.byId:
http://dojocampus.org/content/2008/05/06/jsid-dijitbyid-and-dojobyid/
Many thanks. I tried that,
Many thanks. I tried that, and it works with my toy example, but not with my real code. At least it gives me something else to try.
The real code works with Firefox but not with IE.
Is there anywhere that these gotchas are documented? I've done a lot of googling, but perhaps I have missed something?
Much of the Dojo docs on the web, and the Dojo O'Reilly book, make much fanfare of the fact that it's supposedly platform-independent. The dedication in the book even says "to all programmers who have lost sleep over cross-browser issues" or something similar.
This is ironic.
hmm
not sure what 'gotcha' you are referring to in this case, but if there isn't something in Dojo or Dijit that doesn't work in the supported browsers, it's a bug. Please create a test case illustrating the failure. The dijit.byId vs dojo.byId vs Dom Events vs Dijit events is a common mistake, but if this goes beyond that we should look more closely.
regards-
Peter Higgins
Many thanks - I will have a
Many thanks - I will have a read of the relevant pages on how to submit bugs. I'm pretty sure this is one, as other DOM events can be connected to.
so one thing to note is Dom
so one thing to note is Dom events bubble, and dijit events do not. If you are connecting to the "onchange" event of a widget's .domNode (the top level node in it's template) you will be effectively 'catching' the bubbling of the _acutual_ [input] node's "onchange". Dijit provides the normalized onChange to work around when actually changes occur (minor cross-browser things, and UI-specific things in other cases) ... as a rule, you should not be mixing dom and dijit events. they will likely have unpredictable results. at the very least, it will cause unnecessary confusion.
Looking at your ticket, there is no need to go through the hoops for a DOH test page right off the bat (you can, but is more work than in necessary). A simply html page illustrating the problem would be sufficient.
Regarding documenting dojo.byId vs dijit.byId - agreed. It is one of those things that regardless how many times it is told, written, explained, and documented, it will be difficult to find. It lacks a distinct classification. As such, duplication of the note in as many places as possible seems the only way to get it to be noticed. A FAQ entry would help, but the cookies act as a more in depth version of the FAQ.
I encourage you to assist with exposing these holes in the documentation -- as the material is clearly _somewhere_, just overly difficult to find sometimes. Suggestions are always welcome. If you have a CLA on file, you can participate in the Wiki editing, which will produce static html docs for offline and online viewing: http://docs.dojocampus.org -- we are in the process of migrating the book from drupal pages into wiki/reST format for easier maintenance and community involvement. Any help is appreciated.
Regards,
Peter Higgins
I have submitted
I have submitted http://bugs.dojotoolkit.org/ticket/7609 - tried it against the latest subversion checkout first, but with same results.
A suggestion about documentation- it would be helpful if there was more discussion of the differences between dojo.byId and dijit.byId, especially pertaining to things like the event names. If it's a common mistake as you say above, then it would be helpful if it was written down somewhere. The dojocampus.org site goes some way towards this, but a better place for it would be in the official dojo docs.
I'll add a comment to the page http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-...
Many thanks