JS is not being executed after ajax call

Question

I'm calling a php script that includes some js code by calling XMLHttpRequest.send. Unfortunatly the javascript code in the called php script is not being executed.

The calling routine:

var formdata = new FormData();
formdata.append("uploadfilename", file);

var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false); 
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "mod/intern/uploader_upload_done.php");
ajax.send(formdata);

Any javascript in the called script fails, even an alert() call.

File uploader_upload_done.php:

<?php echo date(); ?>
<script>alert("hallo");</script>

When calling uploader_upload_done.php directly, everything works as it should.

What am I doing wrong?

are you "embedding" your code somewhere in the page? if not, it's just a string in the data response. on the coplete handler make sure you grab the data and insert it in the body of the page — monxas, Jun 10 '15 at 15:09
Show us the code for `completeHandler()`. That where the action is here and we need to see what you are or aren't doing with the Ajax response. We also need to know exactly what the Ajax response that comes from your server looks like. — jfriend00, Jun 10 '15 at 15:13

score 2 · Answer 1 · answered Jun 10 '15 at 15:12

This is a security feature. The right way would be for your remote script to return a json-like message : {"date": "...", "message": "some message"}; Then in your handler you could get the JSON from the response and do an alert(json.message) for example.

score 0 · Accepted Answer · edited May 23 '17 at 11:43

As I understand you make an ajax call to a PHP file, and you expect certain javascript there to be executed. You should take into account that there is a difference between making that call and opening the URL directly in the browser; that means that you are downloading the HTML + CSS + JavaScript code, and the browser is automatically interpreting it. When you perform the ajax call, that is only asking to the server to execute the PHP code, and after that, it just downloads the rest (HTML + CSS + JavaScript), it is not interpreting it.

If you want to execute the JavaScript code that is being returned by the PHP file, embed it into the page doing the Ajax call. From this, you can use:

function evalJSFromHtml(html) {
  var newElement = document.createElement('div');
  newElement.innerHTML = html;

  var scripts = newElement.getElementsByTagName("script");
  for (var i = 0; i < scripts.length; ++i) {
    var script = scripts[i];
    eval(script.innerHTML);
  }
}

However, using eval can be dangerous. Author's demo: http://plnkr.co/edit/LA7OPkRfAtgOhwcAnLrl?p=preview

This function is useful when your PHP file returns a complete HTML document (i.e., an HTML file with head, body, etc.); it gets the script tags and executes their JavaScript content.

If your PHP file returns only JavaScript code, you can execute it directly (again, consider not using eval in production environments). That is:

var JSCode = doAjaxCall();
eval(JSCode);

As suggested by other users, consider using another communication schema (e.g., a json file to indicate what should be executed, instead of passing the code to be executed).

Sorry, I'm to stupid. What do I have to do in my php file? json_encode(array("temp" => "test message")); In my js file after ajax.send(formdata); Calling evalJSFromHtml(html); ? What is the variable html? — Christian Graf, Jun 10 '15 at 15:25
Sorry I did not comment on the html variable. I will update the answer. — Miguel Jiménez, Jun 10 '15 at 15:28

JS is not being executed after ajax call

2 Answers2