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 around 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…

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

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.