ajax加载PHP文件后无法执行javascript命令

Question

I have a PHP script being executed by AJAX, the PHP script loads everything fine except for js scripts in the actual PHP file which I am using to close divs(if the PHP file isnt run via AJAX all the scripts work FYI)..

this is the script not being run in the PHP file by ajax

 echo "<script> closeOne('" . $postid . "'); </script>";

The JS scripts to close divs are included in the header of the page

This is the AJAX script I am using

<script type="text/javascript">
function mainload(str)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest(str);
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("loadmain").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","mainload.php?page="+str,true);
    xmlhttp.send();
}
</script>

Any help would be appreciated.

Answer 1

JS in the ajax response is not executed by default. You have to parse and identify JS statements, then run them using eval function of js. See this code as an example to start your own code:

var sc=xmlhttp.responseText;            
sc=sc.replace(/[\n\r\t\v\u00A0\u2028\u2029]{1,}/gm, ''); //Remove all types of White Space
sc=sc.match(/<.*?script.*?>.*?<\/.*?script.*>/gm); //divide into array, all the script tags

Then you will loop each of the 'sc' and run the following in the loop:

abc=loop_var.replace(/<.*?script.*?>(.*?)<\/script>/gm, "$1"); //remove script/open close tags and get JS only
eval(abc);

Answer 2

If you add script element to innerHTML of a DOM element, JS wont run immediately. because that script element is just added.

and that tag is not going to get parsed at all.

Ideally you should send a response in form of a JSON wrapped function.

You can send output like this from the PHP page.

echo "(function(){ closeOne('" . $postid . "'); })";

In response, you could evaluate this String containing the function using eval.

 codeToExecute = eval(xmlhttp.responseText);

then call the function,

 codeToExecute();

Note : sending functions from server and directly executing it using eval could be a security concern. be careful and better use some JS libraray function to evaluate the string into a JSON object.

There will be String-To-JSON convertersin jQuery,prototype and sencha's libraraies. Better use them or if the browser supports, JSON.parse is also a good option.

But I hope the concept is clear to you.

Alternatively , You could just send the post id from server in a JSON and call closeOne on the response like this:

in PHP,

echo "{post_id:".$postid."}";

and when the response comes,

responseObject =  eval("("+xmlhttp.responseText+")");

closeOne(responseObject.post_id);