Three IE AJAX gotchas
Posted : Sunday July 26th, 2009

I have been working recently on a web-application (J2EE) that uses a bunch of AJAX for the front end and I have come to realize a few things about browsers and their varying support for DOM manipulation and other AJAX related points. Well one thing really. IE in versions before 8 is really, really, really terrible.

I did know about the mess with CSS and various browsers, and in IE8 this mess still continues, for example the ways in which IE vs all other browsers add padding and margins to elements with relation to their size. I didn't really know what a hash Microsoft had made of the DOM support in IE previous to 8 though.

The one good thing I can say though is that at least with IE 8 you can now build a site with the same CSS and JS scripts that will actually work, and work the same on IE 8 and all other browsers. One thing to note, when I say all other browsers I mean: Firefox, Chrome and Opera on Windows, Firefox and Opera on Ubuntu and Firefox and Safari on Mac, so maybe not all browsers, but certainly a good selection on multiple platforms.

At any rate a few bugs/quirks to note in implementing AJAX on IE 7 and 6, maybe this will save someone else some frustration.

1. AJAX objects can only be used once. I am not entirely sure why this is but once you use (aka send a request and get a response back) from an XMLHttpRequest object you cannot use it ever again. You must create a new instance of the object to make another call.

   Again it's worth noting that any other browser (see above list) and IE 8, do not work like this, you can reuse these objects, and frankly I'm not sure why you shouldn't or couldn't.

   In IE 7 and 6 at least though you can't do this. Worse, there is no error/exception raised when you try, but simply nothing happens. If you send a second request with the same object then it will send it and just never, ever come back, aka never fire any events.

   This was a strange one, and not incredibly well documented as far as I can tell and it caught me out because I couldn't understand why the browser was loading data successfully the first time but seemed to hang on further requests after.

2. You must set CSS classes via the className property. This is one that I frankly knew about already but it's worth noting I got caught out when IE 8 properly supports the setAttribute methods, including setting the class of an element and previous IE versions just don't work with those methods.

   To be honest a good rule of thumb to mention here is that if you are doing DOM manipulation at all, you'll really want one set of scripts for IE 6,7 (and earlier) and another set for other browsers including IE8. This is because in general all the standard DOM manipulation methods are supported in other browsers and IE 8 but either not at all or very buggily so in IE 7 or less.

3. You must use properties and inline (anonymous) functions to add functions to DOM elements. The very simple DOM method setAttribute which let's you easily add event handlers with functions and parameters you want is sorely missed here but you have to set event handler functions as properties in older IE versions. Where this gets more complicated is when you want to specify your own parameters.

   A quick example with some code to show the difference and "how-to" do it both ways. Let's say I have a function inserting some div's into a DOM and I want that on onmouseover events to fire an alert that says which div this is. In IE 8 (and other browsers) the code would look like this...

   function sayHello(ID){
     alert("Hello from "+ID);
   }
   
   // in the div creation code...
   var aDiv = document.createElement("div");
   aDiv.setAttribute("class","someCSSclass");
   aDiv.setAttribute("onmouseover","sayHello("+someUniqueValue+");");

   And in IE 6 and 7 you need this...

   function sayHello(ID){
     alert("Hello from "+ID);
   }
   
   // in the div creation code...
   var aDiv = document.createElement("div");
   aDiv.className = "someCSSclass";
   aDiv.onmouseover = function(e){
     sayHello(someUniqueValue);
   }};

   I don't know about you but I know which of those styles I like better (aka the one without the anonymous inline function).

4. Make sure your DOCTYPE is set. This one actually relates to IE8 but it's worth mentioning for the bizarre behaviour that otherwise happens. If your document does not have a DOCTYPE declared (and you can put any junk in it, just as long as you have one) then IE 8 drops into "compatibility" mode which means everything starts behaving totally incorrectly.

   Both CSS and DOM that is correct, and was otherwise working in IE 8 will then break. In theory, this behaviour is supposed to be helpful, maybe, but it's also supposed to be more like operating IE 7, at least based on what IE 8 starts saying it is (IE7) when operating in compatibility/quirks mode, but actually it isn't very much like IE 7 at all. More like IE 5, which all in all can lead to some really bizarre behaviour when you least expect it.

Well, I hope that someone searching finds this helpful. There are a million articles, tutorials etc on a lot of these things but it's hard to find all the major quirks documented in one place so this might just help. I can only hope that soon enough most IE users will have moved on to 8 and left a great number of these problems behind. It's actually kind of more frustrating than ever before now that Microsoft has produced a browser (8) that while not entirely correct is order of magnitudes closer to other browsers in implementations of basic specifications than ones they have produced before. If only more people actually used it...

Tags

ajax  CSS  DOM  IE  quirks 

Categories

Technical  Internet 

Comments

Carvell Fenton - Aug 21st 2009 2:32 PM
 
Thanks for this post. It pointed me in the right direction as I was having the exact problem you mentioned in your first point with IE6.

I also found another option that works without having to remake the object, however, it is mysterious. Check out the discussion here:
http://keelypavan.blogspot.com/2006/03/reusing-xmlhttprequest-object-in-ie.html

Thanks again for the post

Max - Aug 30th 2009 9:58 PM
 
Glad you found it helpful Carvell.