IE: why isn't AJAX resulting HTML updated in DOM?

I'm loading html content via ajax onto a div (using mootools 1.11 and squeezebox, if it matters).

In the content that I load I have some JS that manipulates some of the loaded HTML objects.

Everything works fine in FF, but when I load it in IE (tested on IE7 for now) the code fails with "'null' is null or not an object.

开发者_StackOverflow中文版A quick test shows that the new elements loaded by AJAX are not in the IE DOM. Loaded a div with id 'test' and when I ran document.getElementById('test') I got null. Needless to say running getElementById on original elements works fine.

Does anyone know how to solve / work around this problem?

Some more information: I put my code inside the window 'domready'. Tried using 'load' event, but then IE never called it.

UPDATE

as advised, I checked the same script on IE8 with it's better debugging abilities.

It seems that the problem is indeed in the timing. I run my code at the windows's domReady, and it seems to run instantly, without really waiting for the DOM to be ready (in the popup window). Running the same script using the debugger, once the whole page has loaded, locates the elements with no problem.

So I guess the question now is how to make the script run at the proper time.

• domready event seems to fire well before the dom is ready
• load event seems not to fire at all
• putting the script at the end of the file, after the HTML objects, doesn't help as well
• In the Mootools AJAX options, I indicate 'evalScripts' as true, otherwise the script doesn't run at all

any ideas?

there is nothing that prevents IE from loading elements into the dom. there is also no such thing as 'domready' after updating an innerHTML property. consider this:

new Ajax("someurl", {
    method: "get",
    evalScripts: true,
    onComplete: function() {
        $("someid").setHTML(this.response.text); // load content.
    }
}).request();

now, the question here is, does evalScripts run BEFORE the onComplete or after. i take it the script that you send back is relevant to the markup that you use to update?

the source code for 1.11 goes:

onComplete: function(){
    if (this.options.update) $(this.options.update).empty().setHTML(this.response.text);
    if (this.options.evalScripts || this.options.evalResponse) this.evalScripts();
    this.fireEvent('onComplete', [this.response.text, this.response.xml], 20);
},

which indicates that scripts are evaluated after the update: and before the onComplete, so using:

update: $('somediv'),
evalScripts: true

ought to work. if it does not, then i would suggest trying:

new Ajax("someurl", {
    method: "get",
    onComplete: function() {
        $("someid").setHTML(this.response.text); // load content.
        this.evalScripts(); 

        // or if it fails still, delay it:
        /*
        if (window.ie)
        (function() {
            this.evalScripts();
        }).delay(100, this);
        */
    }
}).request();

You may want to test on IE8 and use the IE Web developer tools to see what is really happening, to see if there was an error somewhere.

You can also get this plugin for IE7, though I remember it being improved for IE8.

This way you can get a better idea what is going wrong, and then update your question and we can help with less guessing.

Some test ideas: - Did you try to use old fassion xmlHttpRequest methods to see if it works without frameworks? - Check your document DOCTYPE, maybe you have an html/xml content type issues that affect only IE - Are you sure the object you are trying manipulate already exist when you access it? IE is way slower than FF. - Did you try to use some other AJAX methods or DOM manipulations to see maybe the problem is less specific? - Did you check your HTML validity? maybe you have some malformed HTML that FF is able to parse but IE doesn't.

For what it's worth, here's a Prototype version of Dimitar Christoffs answer:

new Ajax.Request('someurl', {
  parameters: param,
  onComplete: function(transport) {
    /* eval scripts first */
    transport.responseText.evalScripts();

    /* rest of onComplete code */
    /* ... */
  }
});

This ensures that the embedded scripts are evaluated before executing the rest of the onComplete callback (which is, as of Prototype 1.7.1, NOT the default behaviour).

There may be some version skew issues -- current squeezebox requires mootools 1.2 (and doesn't use setHTML any more, cfr here for issues another tool had with it); you sure your squeezebox and mootools are in compatible releases (and fully support IE)? Maybe just upgrading both to the latest release would fix your problem (worth trying!).