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. :)
Gregg Hilferding's LinkedIn profile
Gregg Hilferding's Delicious profile
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.
Comment by sime on December 10, 2008 at 1:36 am
@sime: Glad this post was helpful!
Comment by Gregg Hilferding on December 10, 2008 at 11:43 am
Thanks! IE7 was stopping @ addClassName
Comment by Dever on February 16, 2009 at 12:14 pm
Just ran into this bug at work. Element.extend() works like a charm. Thanks for posting!
Comment by Evan Meagher on April 24, 2009 at 3:14 pm
Thanks so much. Also, just a note, that if you wrap an element in the Prototype utility method $() that it will have the same behavior as Element.extend.
So in the above example: $(mydiv) does the same thing as Element.extend(mydiv)
Comment by Alex on August 20, 2009 at 4:18 pm