Run JavaScript after Ajax

Question

I have a HTML that uses this function for loading another PHP with Ajax:

   function LoadContent(n,func)
{           
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState== 4 && xmlhttp.status == 200)
        {
            document.getElementById("div-content").innerHTML=xmlhttp.responseText;
        if(typeof(func)==='undefined')
                {
                // nothing
                }
            else
                {
                eval(func);
                }

        }
    }
    xmlhttp.open("GET",n,true);
    xmlhttp.send();
}

So far, all OK. The PHP to be loaded generates a HTML which contains a

<script> 
function foo() { 
alert('hello'); 
} 
</script>

And the original HTML calls the loader with javascript:LoadContent('file.php','foo()') , but foo() is not called. The eval() line says "no such function" in Chrome.

How could I manage it so, after Ajax loading, the JavaScript function which would reside in the loaded html would be executed?

If the HTML you posted is the *response* sent by the server, you also have to add it to the document before you do anything with it. However, I'd argue that this, loading JS from the server and passing a string of JS which should be evaluated after the the content is loaded, is a bad approach. — Felix Kling, Sep 12 '14 at 21:07
Yes it's added to the document, I just shortened the function. I 've edited it. — Michael Chourdakis, Sep 12 '14 at 21:11
Ah. `scripts` added via `innerHTML` are not evaluated by the browser for security reasons (see https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML#Security_considerations). So your function really doesn't exist. See also [Can scripts be inserted with innerHTML?](http://stackoverflow.com/q/1197575/218196) — Felix Kling, Sep 12 '14 at 21:12
May want to look into jsonp; see for example: http://stackoverflow.com/questions/6809053/simple-jquery-php-and-jsonp-example — psema4, Sep 12 '14 at 21:14

score 0 · Answer 1 · answered Sep 12 '14 at 21:00

0

Do this instead:

javascript:LoadContent('newstandby.php',foo)

since foo is a function and it is going to get called as a callback it is passed as function and not it is result( foo() )

answered Sep 12 '14 at 21:00

Dalorzo

19,834
7
55
102

Same result. foo() undentified. – Michael Chourdakis Sep 12 '14 at 21:05
That can't work since `foo` doesn't exist yet (at least if I understand correctly). – Felix Kling Sep 12 '14 at 21:06
It exists when the PHP loads from the Ajax call. – Michael Chourdakis Sep 12 '14 at 21:10

Run JavaScript after Ajax

1 Answers1