how to receive XML in IE8 with mootools

Question

I'm doing a web where I heavily use AJAX requests to a XML service. In fact, my web is a front-end with almost no server whatsoever and uses AJAX to communicate with the back-end.

Everything was going fine (I developed and tested in Ubuntu 9.04 and Firefox 3.0 as a browser). One day I decided to see how my web did in IE8... horror!

Nothing was working as it marvelously did in Firefox. To be more specific, the Request.HTML's were not working. As I said, my web relied heavily on that, so nothing worked.

I spent a day trying to get something running but I had no luck.. The only conclusion to which I arrived was that the XML was incorrectly parsed (I hope I'm in mistake). Let's get to the code:

var req = new Request.HTML({
        url: 'service/Catalog.groovy',

        onSuccess: function(responseTree, responseElements) {

            var catz = responseElements.filter('category');
            catz.each(function(cat){
                // cat = $(cat);
                var cat_id = cat.get('id');
                var subcategory = cat.getElement('subcategory');
                alert(cat_id);
                alert(cat.get('html'));
                alert(subcategory.get('html'));
           }
       },
       onFailure: function(){...}

});

for example, that piece of code. In firefox, it worked perfectly. It alerted an ID (for example, 7), then it showed the contents of the category element, for example:

<subcategory id='1'>
      <category_id>7</category_id>
      <code>ACTIO</code>
      <name>Action</name>
</subcategory>

and then it showed the contents of some inner element, in this case:

<category_id>7</category_id>
<code>ACTIO</code>
<name>Action</name>

In IE8, the first alert worked OK (alerted 7) but the next alert (alert(cat.get('html'));) gave an empty string and the last threw an Exception... it said something about subcategory beeing null.

What I concluded with this all is that the elements where parsed correctly in Firefox, but in IE8 I only got the tags and the attributes OK, everything else was completely wrong (in fact, missing). I mean, the inner content of all the elements of the response where gone!

Other fact you could use: this code: alert(cat.get('tag')); resulted in Firefox: category IE8: /category <-----------(?)

hmm what else... oh yeah... the line you see commented above (cat = $(cat);) was something I tried to do to fix this. I read in the mootools Docs that IE needed to explicitly call the $ function on elements to get all the Element-magic ... but this didn't fix anything.

I was so desperate... I even fiddled arround with mootools.js' code

OK, so... What I want you, dear mootool-pro's is to help me solve this problem, for I REALLY need the web to function in IE8, and in fact I chose mootools to forget about compatibility problems...

Well... sorry for my shaky english and post length! Thanks a million in advance!

Manuel

ps: if something is not clear, please ASK! I'd appreciate any help :D

Answer 1

I had a similar issue like this sometime ago using jQuery. The problem was that, in IE, the incoming response data needed to be handled by the Microsoft.XMLDOM ActiveX object.

The general steps are to:

1. Instantiate the ActiveX object.

   var oXmlDoc = new ActiveXObject("Microsoft.XMLDOM");

2. Pass it the incoming response data and load it.

   oXmlDoc.loadXML(sXmlResponseData);

3. Parse it as needed.

You can check out the full resolution here.