Friday, January 29, 2010

IE bug fight experience

Today finished with basic functionality of file browser which allows user to upload/ download file and share it among users based on roles and group/ category.
It was quite a task and IE added to it by behaving exactly same as what I heard or read on web. :-(
The issue was not new, but an innerHTML property failure of IE. Though not standard, innerHTML property works fine on most browsers other than IE [IE have to keep it's individuality ;-)].

Let's see what had happened.
In my code I had 3 DOM objects which I would append to parent element one at a time depending on scenario.
Before appending new object to parent element I cleared the parent content by setting innerHTML to blank.

parent.innerHTML = ''
parent.appendChild(new_object)

It worked fine in other browsers but in IE.The object was not rendering on the page.
It was a time to get experts help so posted a topic to ORKUT community. The immediate reply I found of a moderator saying not to use innerHTML in DOM, instead use removeChild to clear content of parent element.
Although unsure of solution, hint was worth trying. Atleast it was proper way of coding DOM as he said.
To clear parent content I did the following.
var len = parent.childNodes.length;
if(len){
    for(l=0; l<len; l++){
        parent.removeChild(parent.childNodes[0]);
    }
}
and next step was to append new object
parent.appendChild(new_object);

I quickly refreshed browser (IE offcourse) and checked for all scenarios. To my surprise it worked perfectly.
My first IE bug fight experience, before that it was all heard or read fairy tales of IE bugs.