Prototype Internet Explorer Gotchas

One week into building a technology preview for a new web application, I finally decided to check and “just make sure” that everything was working as well in Windows Internet Explorer as it was working in Safari and Firefox. Imagine my chagrin when the page loaded and was completely blank.

Not even a joyous error message or self-destruct error report to pore over for clues. Just a blank screen. Nothing. Nada.

First some background… I’m building the client side of the in Javascript using the amazing Prototype and Scriptaculous libraries.

It turns out that there are two very important things to keep in mind for Internet Explorer. First, Element.extend is your friend when adding to the DOM. Example:

var my_div = document.createElement('div');
Element.extend(my_div); // without this line, the next line causes IE to stop processing the script!
my_div.addClassName(’thumbnail’);

Second, be careful what you use as names for custom attributes! If you inadvertently cross the streams by using form attributes on non-form elements then Internet Explorer will suffer total protonic reversal (or, in other words, forcibly shut down). Example:

var my_li = document.createElement('li');
Element.extend(my_li);
my_li.setAttribute(’value’, s.id); // IE self-destructs
my_li.setAttribute(’valuetest’, s.id); // IE works fine

Although there is little else I can share about the application I am working on, suffice it to say in about, oh, six months I should have both good news to share and a fantastic grasp on Javascript programming. :)

2 Responses to “Prototype Internet Explorer Gotchas”

  1. United States sime Says:

    This took my most my day. IE was returning a TypeError in what (still) seems a normal use of .each(function(e) { });.

    Element.extend(e); lets me go home for the day.

  2. United States Gregg Hilferding Says:

    @sime: Glad this post was helpful!

Leave a Reply