Slightly Remarkable

So, at work today, I discovered another interesting facet of jQuery and IE.

This is in specific regards to jQuery 1.4.2 and IE7. I haven’t tested this in other versions of IE, but it’s probably as applicable. For jQuery, this will only be a problem in 1.4.2+, as earlier versions of jQuery don’t support this feature.

Let’s get to it.

The situation

I’m generating some HTML forms on-the-fly by passing some JSON objects to a function that returns a jQuery object, which I then append to a modal dialog. It’s pretty elegant, and I may release it as an open-source jQuery plugin at some point. Anyway, part of this function uses jQuery 1.4.2’s ability to generate jQuery DOM objects when HTML strings are passed to the function. Example:

$('<div class="myclass" />');

This is great because it allows me to create a string of HTML and pass it to jQuery, effectively increasing the speed of the program by avoiding function calls (can you imagine calling the attr() method for every attribute, and then the append() method for every element, including child elements??).

The problem

So what’s the problem? Well, this works in IE, so you’d think there isn’t a problem. In fact, I was also convinced (read: tricked) that IE handled this fine, as initial testing returned the expected results. However, because sending an empty string to the jQuery function returns an empty jQuery object, debugging this type of code can be very dangerous, as instead of generating errors, the script will die or stop functioning silently. No errors makes debugging very difficult!

I was using the following code to generate a form tag, append it to an object, and then return it. It looked something like this:

var newForm = $('<form method="post" action="">');

This works in other browsers, but IE chokes. Silently. I discovered this when I started doing some testing on generating the object, independent of my script (which I’d been attempting to debug for well over an hour at this point).

Alerting the length property of the jQuery object has been helpful here. I first tried $('<div />').length and got the result 1. That makes sense. Then I tried $('<div>').length. This also, correctly, returns 1.

Then I tried something else. Since all this hypothetical testing was driving me bananas, I tried the actual form HTML I was using. $('<form method="post" action="">').length returned… 0!! How frustrating! Taking the attributes out and simply using $('<form>').length returns 1 as well, however. To get the correct result, I had to use the self-enclosing form tag: $('<form method="post" action="" />').length. This returned the correct result (1). Finally. That one character fixed my entire program in IE. Wow!

In Summary

TL;DR version: IE chokes and returns an empty jQuery object when you pass an HTML string that has attributes without a self-closure. I hope this saves some folks valuable time debugging this ridiculous phantom. I’m curious if this should be filed as a jQuery bug or not.

Happy coding!

This is a note to myself and anyone else encountering the following JavaScript error in IE6.

Could not get display property. Invalid argument.

This error applies specifically to jQuery when using the animate method. The animate method works only in steps, so you can’t toss in CSS commands sloppily (although other browsers will treat this okay). Instead, you have to specify the CSS separately.

In other words, your original function may look like this:

$("#myObject").animate({
      display : 'block',
      top: '+=10px'
});

But for it to work in IE6, you’ll need to revise it to the more verbose:

$("#myObject").css({
      display: 'block'
}).animate({
      top: '+=10px'
});

In some cases, you may get the old JavaScript error that IE throws whenever it gets confused:

Object doesn't support this property or method.

Always be careful not to use the animate method as short-hand for the css method, as doing so may cause IE6 to simply destroy all of your associated/caller functions and report that they don’t exist. There’s not really any simple way to debug this error, either, so just check for it whenever you can’t figure out what’s wrong.

The issue occurs in IE only. When you run the example, you get an error that says, “‘getElementsByTagName(…).childNodes.0′ is null or not an object.” The problem is not with the JavaScript code itself, but rather a setting in Internet Explorer. Under the Advanced tab in Tools -> Internet Options, enable the checkbox next to “Use HTTP 1.1 through proxy connections.”

This should fix the error. If not, try working on a server (localhost or an online webserver), because operating systems’ file systems differ from that of the Web’s, which is what Ajax uses.

The bug basically is when you put a comment in the middle of a CSS attribute. I’ve only tested this with backgrounds, but I’m guessing it will “work” (the bug, that is) if used in the middle of any mutli-value CSS property.


background: #FFF /* #EEF */ url(background.jpg) 50% 0 no-repeat;


IE 5.5 outputs no background image, though it does get the background color right. Removing the /* #EEF */ comment from the CSS makes it work fine. Does anyone know why this is? It’s interesting to also make note that IE 5.01 doesn’t have this problem, nor does IE6. I think there are fewer bugs in IE 5.01 (although it supports less CSS) than IE 5.5. A few simple things (text-align center and such) to center my current design, and it worked absolutely fine in IE 5.01; IE5.5, however, didn’t center the menu or display the background (due to the bug I just mentioned). In order to center the menu for IE 5.5, which I’m guessing more people use, I had to offset the menu’s centeredness for IE5.01. I’m sure that’s acceptable, as you can still use the navigation. It might not look as pretty, but I doubt many people will be browing my site with IE5.01 (and if they use an old version of IE, there’s not much of a chance that the version will be prior to IE5.5). Thoughts? Anyone encountered this problem before? What were your experiences with it?