javascript XMLHttpRequest open php file and execute more javascript

Question

I have a main page, call it Main.php. On this page, is a button that when clicked, sets a div\'s innerHTML (already on Main.php, called divResults) with the results from Re

Answer 1

Here is a good read on understanding what you are doing: Eval embed JavaScript Ajax: YUI style

Making your code work with using eval(); but its not recommend for various reasons:

Let's take your php and modify it like this:

<script type="text/javascript">
    function result() {
        alert("Success");
    }
</script>
These Are The Results

and This is the callback function from AJAX. result(); is not executed because it doesn't get evaluated, and thus does not exist. which is in your case

if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
        {
            document.getElementById("divResults").innerHTML=xmlhttp.responseText;
            result(); // this function is embedded in the responseText
                      // and doesn't get evaluated. I.e. it doesn't exist
}

in order for the browser to recognize the result(); you must do an eval(); on all the JavaScript statements with in the script tags that you injected into the div with id divResults:

if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
        {
            document.getElementById("divResults").innerHTML=xmlhttp.responseText;
            var myDiv = document.getElementById("divResults");
            var myscripz = myDiv.getElementsByTagName('script');
            for(var i=myscripz.length; i--;){
                   eval(myscripz[i].innerHTML);
            }
            result(); //alerts success
}

Easy Way:

The easiest way i would do it is basically remove the JavaScript from the php and display the content, and after callback just do the rest of the JavaScript within the callback function php:

 echo 'These Are The Results';

JavaScript:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
    {
        document.getElementById("divResults").innerHTML=xmlhttp.responseText;
        alert('success'); // or whatever else JavaScript you need to do
    }
}

Answer 2

try to wrap the javascript code from Result.php in a function and call it after inserting it like :

<script type="text/javascript">
    function result() {
        alert("Success");
    }
</script>
These Are The Results

and

   if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
    {
        document.getElementById("divResults").innerHTML=xmlhttp.responseText;
        if(result) result();
    }

Answer 3

Your results.php needs to be something like...

echo 'eval("function results() { alert(\'success\'); }");';

And then call the results function.