The frustration with IE

Until recently I did not like JavaScript, mainly due to the inability to find bugs and debug the code. Years of developing for IE I learnt that using JavaScript is a muddy path full of IE error popups. Until I came across Firebug and I started using Firefox for developing and testing Web pages that use JavaScript. Slowly I could write and debug JavaScript code and understand the DOM and the JavaScript OO nature by inspecting objects in Firebug. Now I can write OO JavaScript for any purpose without the frustration about loose JavaScript typing or the unexplained error messages.

Sounds great, but I get really frustrated when I write JavaScript code that works fine in Firefox and Safari, but errors in IE. These errors usually result in hours of cursing and hair pulling, which lead me to believe that if Microsoft did not bundle IE free with Windows in the first place it would have never been the first browser anyway. Normal people do not really care, but for developers IE is a great pain. You either develop for IE or other browsers, or go to great length and cost to ensure your code works in at least IE, Firefox, Safari and may be Opera. The cross browser compatibility issue is hindering the adoption of browser based Rich Internet Applications that are based on JavaScript, DHTML and CSS. Many toolkits such as Dojo and ExtJS are compatible with many browsers, but you have to write your own JavaScript code which might not be compatible with all browsers.

I have faced two issues with IE where I pulled my hair for a while, but was glad to find some answers in Google before I ended up with no hair, apparently many other developers experienced the hair pulling over IE behaviour and if you feel the same you are not alone.

First problem: tr.innerHTML, I developed a nice piece of JavaScript that manipulates a table and dynamically create and delete table rows based on available data and user’s actions. Since I developed it in Firefox I used the innerHTML function to populate the table columns in the table rows, a piece of code that worked fine in Firefox, but failed miserably in IE, after some hair pulling and Googling the answer was you can not use innerHTML with TR in IE. You have to use the tr.deleteCell and insertCell functions I had to grow my code considerably to also work in IE.

Second problem: IE error message ‘Expected identifier, string or number’. I got this error message on some code that worked successfully in Firefox. And although the Microsoft Script debugger pointed me at the error location, I just could not see any problem with the code. A couple of hours of frustration and hair pulling I decided to search for the error message in Google and voila I found the answer it is to do with comma in the code below which will work successfully in Firefox, but fail in IE:


// private functions
/**
* @return window if found
* @param {Object} windowName
*/
var getWindow = function(windowName) {
var win = Ext.WindowMgr.get(windows[windowName]);
if(!win)    {
// create a new window
win = new Church.windows.addChurchWindow({
id: ‘add-church’,
});
if (desktopEl) {
win.render(desktopEl);
}
}
return win;
};

I think I left this comma in place by mistake after deleting a second line. Anyway I would not expect more from IE, I just wish everyone will be convinced to move away from IE and use Firefox or Safari, so we developers don’t have to go through the pain of developing for IE. And I also wish that IE would degrade gracefully in case of the issues mentioned above and many others.