What are the typical reasons Javascript developed

Question

I developed some javascript enhanced pages that run fine on recent Firefox and Safari. I missed to check in Internet Explorer, and now I find the pages don't work on IE 6 and 7 (so far). The scripts are somehow not executed, the pages show as if javascript wasn't there, although some javascript is executed. I am using own libraries with dom manipulation, from YUI 2 I use YUI-Loader and the XML-Http-Request, and on one page I use "psupload", which depends on JQuery.

I am installing Microsoft Script Editor from Office XP and will now debug. I will also write specific tests now.

What are the typical failing points of IE? What direction I can keep my eyes open.

I found this page, which shows some differences. visit: Quirksmode

Can you from your experience name some typical things I should look for first?

I will also ask more questions here for specific tasks later, but for now I am interested in your experience why IE usually fails on scripts that run fine in Firefox

Edit: Thank you for all those great answers!

In the meantime I have adapted the whole code so that it also works with Internet Explorer. I integrated jQuery and built my own classes on top of it now. This was my basic mistake, that I did not build all my stuff on jQuery from the beginning. Now I have.

Also JSLint helped me a lot.

And many of the single issues from the different answers helped.

Answer 1

I found an odd quirk just the other day with Internet Explorer. I was using YUI, and replacing the contents of a table body () by setting the innerHTML

Y.one('#elementId').set('innerHTML', '<tr><td>Column 1</td></tr>');

This would work in all browsers EXCEPT IE. I finally discovered that you couldn't replace the innerHTML of a table in IE. I had to create a node using YUI and then append that node.

var myNode = Y.node.create('<tr><td>Column 1</td></tr>');
Y.one('#elementId').append(myNode);

That was a fun one to figure out!

Answer 2

If you stick to using jQuery or YUI as your post is tagged, you should have minimal differences between browsers...that's what the frameworks are for, to take care of these cross-browser differences for you.

For an example, look at the quirksmode DOM traversal page, according to it IE doesn't support most things...while true, the frameworks do, for example IE doesn't support elem.childElementCount, but in jQuery: $(elem).children().size() works to get this value, in every browser. You'll find there's something in the library to handle 99% of the unsupported cases across browsers, at least with script...with CSS you might have to move to plugins for the library, a common example of this is to get rounded corners working in IE...since it has no CSS support for such.

If however you start doing things directly, like document.XXX(thing), then you're not in the library, you're doing javascript directly (it's all javascript, but you get the point :), and this might or might not cause issues, depending on how drunk the IE team was when implementing that particular function.

With IE you're more likely to fail on styling coming out right than raw javascript issues, animations a few pixels off and that sort of thing, much more-so in IE6 of course.

Answer 3

For what it's worth I just came across this nasty issue in < IE9

say you have some html like this:

<table><tr><td>some content...</td></tr></table>

and for some reason (I had a good one) you need to retrieve all HTML in the table before the last closing TR you might try something like this:

var tableHtml = document.getElementById('thetable').innerHTML;
var fragment = tableHtml.substring(0, tableHtml.lastIndexOf('</tr>'));

< IE9 will return nothing (-1) here because the tableHtml variable contains all html tags upper-cased and lastIndexOf is case sensitive. To get around this I had to throw in a toLowerCase() before lastIndexOf.

Answer 4

Using console.log() for outputting errors to the Firefox error console will cause your scripts to fail in IE. Got to remember to take those out when you test in IE.

Answer 5

You mentioned jQuery which I'm less familiar with but for general reference, and specifically with Prototype, one thing to watch out for is reserved words / method names in IE. I know what often gets me is things like:

someElement.appendChild(new Element('label',{ **for**: someInput.id }).update( someLabelText );

(new Element(tagName, propertyHash) is how new elements are created in Protitype). In IE, for: must be 'for':, because for is a reserved word. Which makes complete sense -- but FireFox will tolerate this.

Another example:

someElement.wrap('div').addClassName('someClass')

(the wrap method in Prototype wraps one element in another) -- In IE, on textareas, wrap is a property, and Element.wrap() must be used instead of the methodized version

These are two examples which come to mind from my experience. They're based on prototype but the core issue isn't: Watch out for any methods/labels/identifiers which IE considers reserved words but FireFox or Safari will tolerate.

Answer 6

Extra commas and missing commas used to be usual problem on IE while it works smoothly on FF.