The Case of IE and the Delinquent JavaScript Comma
From HunterWiki
This is the second time this bug has cost me precious time, so I document it here in case perchance it may save you from my fate.
The long and the short of it is that in FireFox the following JavaScript works fine: (note the extra trailing comma after 'height')
$(item).animate({
left: left,
top: top,
width: width,
height: height,
}, 300);
In IE, this will fail silently! Which (IMO) is really the bug. If IE somehow told me there was some sort of parser error, or unreadable line, or any kind of message at all, then I wouldn't imagine that everything was correct (except a bunch of my functions seemed invisible). That's right, ALL the JavaScript in the file which contains the above line will disappear for IE if you leave that comma at the end.
I realize this is technically my coding error, but it creeps in surreptitiously in cases like this:
$(item).animate({
left: left,
top: top,
width: width,
// Don't set the height anymore
// height: height
}, 300);
By being slightly careless, I've triggered this condition. So the lessons are:
- Write to your senator and demand that Microsoft fix this problem
- Test in IE frequently, as then you will have less code to review when trying to track down the problem,
- Believe the error messages
- Sometimes you're better off resorting to brute force debugging earlier
Number 3 is tougher than you think. The error that IE was giving me was that function 'xyz' did not exist. This of course was preposterous as I could quite clearly see it, so I assumed it had to do with how my event handler were set up, or the order of the JavaScript files, or some strange jquery ready() problem. Which is where #4 comes in. Basically to find the problem I did a binary search of sorts: cloned my JavaScript and started removing half of it at a time until I could tell the file was being parsed, and then proceeded to add in bits and chunks until the problem appeared and then went line by line until the offender was detected.
