Christian Graf
Christian Graf

Reputation: 406

JS is not being executed after ajax call

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?

Upvotes: 1

Views: 150

Answers (2)

Miguel Jim&#233;nez
Miguel Jim&#233;nez

Reputation: 1303

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).

Upvotes: 0

PEM
PEM

Reputation: 1978

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.

Upvotes: 2

Related Questions