This problem was a rather strange one (JRA-14423). I like tooling with JavaScript but sometimes it surprises me how many differences there may be between various browsers.
Using JavaScript libraries has its benefits. A library may give us another abstraction layer – a layer that if designed well can hide differences between browsers and provide a uniform interface. Another reason to use a library is that if a library is popular and widely used, it is very likely well tested on probably more browsers than you are willing to test your code on.
However, no library is perfect. The problem we encountered and I am about to describe happened with Yahoo! User Interface library. In Jira, we have a little panel that pops up and shows a list of links. Getting this list is not very expensive, but taken into account that this panel would be accessible from almost every single page of Jira, it would be quite heavy on our server. Especially taking into consideration that the link that pops this panel up would not be clicked very often.
The solution: every time a user clicks the link that pops up this panel, we make an AJAX request for the list of URLs we want to display. And of course we display a little loading bar until we have that list of URLs. We made it into a little widget that is created when the page loads. We used YAHOO.util.Event.onDOMReady event handler. Strangely enough Internet Explorer sends this event too early and DOM is not ready yet. As a result Internet Explorer reported the following error in the middle of page loading.
After that the loaded content disappeared and was replaced with a standard error message.
If this happens to you with your code, don’t panic. There is an easy fix. If the execution of your code can wait a little bit longer, run your code on ‘load’ event rather than on ‘DOMReady’. In terms of YUI methods, replace
YAHOO.util.Event.onDOMReady(handler);
with
YAHOO.util.Event.addListener(window, 'load', handler);
According to D. Flannagan – JavaScript The Definitive Guide
- window.onload = handler
- <body onload=”handler” … >
- <frameset onload=”handler” … >
The onload property of a Window specifies an event handler function that is invoked when a document or frameset is completely loaded into its window or frame.
Problem solved. The code execution is a bit delayed, but it is guaranteed to work on Internet Explorer without strange errors*.
* strange errors – most (if not all) browsers work fine, only IE has a problem