I'm having trouble getting events to work correctly in my dojo app. I can connect a function to an event of a widget, and I can get that event to fire that function ( a keypress for example), but when I add in more than one widget and connect another widget to it, both functions are fired. What gives? When I started diving into the event data I found that no matter which widget generated the event with a keypress, the target was always some generic source, like httpentity or window. I never did get it to work, and instead fell back to placing the event bindings declaritively in the HTML. Anyone have some code examples of this where multiple fields and multible connect statements are being used in the same form?
could you make share your
could you make share your code? The only time I've seen a dojo.connect() show window as e.target is when you pass "null" to dojo.connect -- which sounds silly, but is actually quite easy to do by mistake:
...
dojo.connect(dojo.byId("fooC"), "onclick", function(e){
// dojo.byId("fooC")==null, so we're listening on window
console.log(e.target);
});
or rather how are you connecting to the widget event?
Slight problem in recreation.
Sorry about this, but I wanted to respond to your post for more info as soon as possible, and I don't have access to my windows workstation at work, so I'm doing this from my Linux laptop, from Barne's and Noble on Saturday. For whatever, reason, I'm not completely able to recreate the exact problem, but in rewriting the code from scratch, I'm getting an idea of what is going wrong. So, lets have a look at the code:
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */
.geshifilter {font-family: monospace;}
.geshifilter .imp {font-weight: bold; color: red;}
.geshifilter .kw1 {color: #b1b100;}
.geshifilter .kw2 {color: #000000; font-weight: bold;}
.geshifilter .kw3 {color: #000066;}
.geshifilter .coMULTI {color: #808080; font-style: italic;}
.geshifilter .es0 {color: #000099; font-weight: bold;}
.geshifilter .br0 {color: #66cc66;}
.geshifilter .st0 {color: #ff0000;}
.geshifilter .nu0 {color: #cc66cc;}
.geshifilter .sc0 {color: #00bbdd;}
.geshifilter .sc1 {color: #ddbb00;}
.geshifilter .sc2 {color: #009900;}
<title>Dojo: Hello World!</title>
<style type="text/css">
//@import "/include/dojo/dijit/themes/tundra/tundra.css";
//@import "/include/dojo/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="/include/dojo/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
// Load Dojo's code relating to the Button widget
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.TextBox");
function connectMyStuff(){
batchWidget = dojo.byId("Batch");
dateWidget = dojo.byId("Date");
nameWidget = dojo.byId("Name");
titleWidget = dojo.byId("Title");
dojo.connect(batchWidget, 'onkeypress', remapKeys);
dojo.connect(dateWidget, 'onkeypress', remapKeys);
dojo.connect(nameWidget, 'onkeypress', remapKeys);
dojo.connect(titleWidget, 'onkeypress', remapKeys);
}
function remapKeys(event){
event.stopPropagation();
console.debug("The data we need to remap keycodes:");
switch(event.charCode){
case 13: console.debug("Got a enter key press.");
break;
case 9: console.debug("Got a tab key press.");
break;
debug: console.debug("Got some other key press event: " + event.charCode +
" on target \n" + event.target);
}
console.debug("Dojo's idea of what an enter and tab key look like " + dojo.keys.ENTER + " " + dojo.keys.TAB);
}
function docInit(){
connectMyStuff();
}
dojo.addOnLoad(docInit);
</script>
</head>
<body class="tundra">
<h1 align="center">Dojo Hello World</h1>
<form action="myformproc.pl" method="post">
<table align='center'>
<tr><th>Batch</th><th>Date</th><th>Name</th><th>Title</th></tr>
<tr>
<td>
<select name="Batch" dojoType="dijit.form.ComboBox" autocomplete="false" id="Batch">
<option value="310">Monday</option>
<option value="320">Tuesday</option>
<option value="330">Wed</option>
</select>
</td>
<td>
<input type="text" name="Date" value="2005-12-30" id="Date"
dojoType="dijit.form.DateTextBox"
required="true" />
</td>
<td>
<input type="text" name="Name" dojoType="dijit.form.TextBox" id="Name"
trim="true"
propercase="true" required="true"/>
</td>
<td>
<select name="Title" dojoType="dijit.form.ComboBox" autocomplete="false" id="Title">
<option value="1">Ditch Digger</option>
<option value="2">Chipper</option>
<option value="3">Sous Chef</option>
</select>
</td>
</tr>
</table>
<center><button dojoType="dijit.form.Button" id="helloButton">Hello World!
<script type="dojo/method" event="onClick">
alert('You pressed the button');
</script></button></center>
</form>
</body>
-->
What seems to be happening, at least on my Linux box, is that the key codes for TAB and ENTER are coming out as 0, whereas the actual codes Dojo assumes them to be are 9 and 13. I do remember, that on my windows box, the key code printed out for enter was 0. This would of course mess up any switch statement I might use to remap enter codes.
As for the "event.target" values in my test code returning generic document level element values instead of the actual targets, thanks for the pointer. I'll have a look at my function references to see if they were bogus... however, I'm a C++ programmer as well, so that seems like a bit of a stretch from a mistyped piece of code perspective goes.
Thanks,
Evan
a couple of
a couple of issues:
dojo.byId("Name") on a node id="name" dojoType="dijit.form.ComboBox" isn't the node you are expecting it to be. You'd want dijit.byId("dijit.form.ComboBox").domNode, which is a real node. You'd probably actually want "focusNode", which 9-times-out-of-10 is a real input that has real key events. I'm not sure if Combo prevents the event from bubbling. What you are doing is connecting to "null" essentially, which is why the keypresses will seem to come from window.
Also, there are differences in keyCode and charCode, as desicribed here:
http://trac.dojotoolkit.org/ticket/6667
The solution was ultimately introduce a normalized key code: charOrCode to the event. The ticket will explain in more depth, and you can see by the patches referenced in the comments what needs to happen prior to 1.2 (which is just some weeks away)
Hope this helps.
Regards,
Peter Higgins
Hmm... this confuses me
Peter,
I tried your first suggestion of switching out the dojo name space for the dijit name space for getting the node, and ended up getting Javascript errors in the console. The error was the usual blah has no properties, where blah was "dijit.byId("Add").domNode". The "Add" string represents the form item by that identifier (id). I have a feeling that your example from above was not to be used in this way, but can't figure out how it might work, or what you were thinking. If I am using your example wrong, please let me know with an explicit example.
Thanks,
Evan
We both might be right... partly
Peter,
Ok, I'm in posession of my code I wrote at the office and I think I see the problem... or at least, I have half a solution. I noticed that in the code I sent you, my HTML tags had both a "name" and "id" property set, then my connect function call used the string found in the "id" property. Actually, they were both the same string, but I'm getting to that. In my office code, I noticed that I only had the HTML "name" tags in place, no "id". When I added in the "id" the behavior of my scripts became more on-line with what I was expecting.
So in the final analysis, I think that your assessment that a NULL in the target field would produce the described behavior was spot on, however, the notion that the dojo.byId vs dijit.byId is a problem, is less certain. What does seem to be the case is that using the "id" property in your HTML input tags is a requirement for the use of connect/byId calls. Not using this procedure produces an unusable behavior.
P.S.
I should note that the "id" tag is mentioned in the user documentation as being required and that I simply overlooked this as I was changing these tags to use a delarative function mode, i.e. calling the event handler directly by explicitly writing it into the HTML.