« Introduction | Main | Standards-based CSS web design tool »
Wrestling with IE
By Shawn Bradley | August 17, 2007
And now for today’s IE vs. Everyone Else showdown!
I typically develop javascript applications using Firefox as my primary browser. (Oh, wait - I use Firefox as my primary browser for everything! Duh!) Anyway - I like developing within Firefox because of the wonderful debugging tools available, such as Firebug. As I progress in the development process, I frequently switch over to IE, just to make sure some IE-specific (mis)behaviour isn’t screwing me. And invariably, I find myself indeed being screwed by IE!
In today’s episode, as usual, the code was working fine in Firefox, but breaking in IE. Running the page in IE resulted in a runtime error indicating that my Balloon object class was not defined. What?! It most certainly is defined - I just ran it in Firefox. As it turns out, the issue had to do with IE’s inability to handle trailing commas within custom javascript objects. But first, a little background…
I am developing a custom popup balloon for a site I am working on. The balloon will be activated in response to the user rolling over an image map with their mouse. Each map slice has an associated balloon containing detailed information about that region of the image map. I am using Beau Scott’s AJAX-enabled tooltip HelpBalloon as an example.
After several hours of trial and error, I gave up and took a break. Upon returning, I had the feeling that the root of the problem was probably something simple and stupid, like a missing semi-colon. After reverting back to a copy of the object that I knew was working, I began systematically replacing the code with my latest version, testing each change along the way. Almost immediately, the problem returned, as soon as I pasted in the initialize() function, which looked like this:
initialize: function(options)
{
this.content = options.content;
this.options = Object.extend({
title: options.title,
duration: 0.25,
imgSlice: options.imgSlice,
imagePath: options.imgPath,
}, options||{});
},
The problem here is two-fold. First, the trailing comma at the end of the imgPath line. Whether correctly or not, IE fails to recognize that there are no more arguments after this line, as denoted by the closing curly brace. Thus, I get my first javascript error in the browser, which looks like this:
Due to the error, the object doesn’t load, resulting in the “object not defined” message, which is my ultimate thorn.
The second problem is very similar to the first - the trailing comma at the end of the function definition likewise causes IE to barf. Due to cut-and-paste operations when moving functions around within the source file, it is very easy to end up with a trailing comma after your last function definition. Again, IE fails to recognize the end of the object definition and intelligently determine that there are no more functions. Instead, it throws the same “unrecognized character” error, resulting in the object failing to load.
Once I figured this out and removed the trailing commas, the object now works fine in both IE and Firefox. I hope this discovery saves someone out there some hassle.
Topics: Web Development |