Troubleshooting strange Dojo bugs in Internet Explorer
The title of this article is a bit misleading as it perhaps have should have been called “Creating hacks for your Dojo code to work with bugs in IE or your other poorly written JavaScript code”. During a recent bug (talked about below) I started wondering if Dojo wasn’t playing nicely with other JavaScript I needed. I of course realized this wasn’t the case and found that some other javascript doesn’t play nicely with dojo when using IE. My problems turned out to be mostly related to an unfixed bug in every version of IE related to its domReady event.
I was recently developing a website that utilized an Accordion Container, Dialog box, and a non-Dojo JavaScript menu. When developing the site on my local network where my web server was down the hall, everything was working fine. The problems began after copying the site to my production server located off site. I found that sometimes my dojo parser would render its content and sometimes it wouldn’t (note: I set parseOnLoad to false and execute my parser in a dojo.addOnLoad for reasons documented in this article). To make matters worse, there wasn’t even the yellow exclamation point letting me know that there was a javascript error. Baffling!
After noticing that there weren’t any JavaScript errors, I was able to narrow the problem down to one of the following issues:
- The parser in my addOnLoad was never executed
- The parser in my addOnLoad was executed before a valid DOM tree was ready from Internet Explorer.
After some testing, it was clear that scenario 2 was occurring. dojo.addOnLoad is an event that fires when the browser’s domReady event fires. The domReady event lets javascript know that it may not have all the data yet, but it does have a valid HTML tree for you to work with. However, Internet Explorer has a bug with domReady in which it has neglected to fix in all of its versions. The following blog posting documents the problem pretty well and suggests that in some instances the event is fired right after it was defined.
The likely reason I only experienced this issue when accessing the content off site was that the content was being delivered too quickly on my own network for this problem to be exposed. However, one tricky thing I haven’t been able to come to the bottom of is when disabling cache in IE, this problem went away. Comments are welcome to explain this phenomenon to me!
The Resolution
One reliable way to fix this in Dojo is to use the load event instead of domReady in Internet Explorer. You can do this by:
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( ‘on’+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
if(dojo.isIE){
addEvent(window, ‘load’, function(event) {
dojo.parser.parse();
});
}else{
dojo.addOnLoad(function(){
dojo.parser.parse();
});
}
The addEvent function is a generic function that allows one to execute a function at a specific event. In this case, the ‘load’ event.
So why hasn’t this problem been discussed much in the Dojo community? Well if Dojo and your [properly written] Dojo formatted JavaScript is run solely on a site without any other 3rd party scripts, the likelihood of these types of issues happening is pretty small. Unfortunately, running only Dojo isn’t always possible in a normal world as needs arise like in my case for a JavaScript menu. Not all code is written to the level of finesse that the creators of Dojo put into their code. All it takes is one DOM manipulation inside the body tag for things to start going haywire in Internet Explorer.
While Internet Explorer deserves much of the blame for these types of problems, always be prepared to experience some difficulties when combining different JavaScript components together since not every component is coded in the same quality as you might expect.
