How to interpret javascript code sent via ajax?

Question

hello,

I have javascript code embedded inside a html template file. When I load this template via ajax and inject it into the DOM, the javascript code isn't functional.

Would anyone know how to get this javascript code to execute as normal?

Thanks a million!

Answer 1

Your Javascript probably calls document.write.
If so, there is no solution; you need to rewrite the Javascript.

EDIT: You need to manually run the inserted <script> blocks using eval.

jQuery can do this automatically:

$('#someId').html(yourHtmlString);

Answer 2

eval() is normally how you'd trigger JS inserted into a page - otherwise, if it's attached to the DOM somehow you need to trigger it after it's written, by calling a method or firing an event.

Answer 3

Just load your ajax template into an iframe, and have your template include basic html structure. Then whichever script blocks you include, they will be executed.

Answer 4

You could use a js library like mootools. It has a option to execute javascript code on content loaded through AJAX.

Basically it parses the html looking for script tags, the extract those scripts and executes it using window.execScript (when available) or injecting the script to the DOM. I think that once you have the scripts content in a variable you could just use eval.

Answer 5

You can split it in two files, one in .html and the other in .js, load both and eval the js.

Or you can make the JS write the html page itself, so you don't need a .html page.

Answer 6

There are several approaches to solve this problem. I am not sure how your js is related to the template file that you mentioned, but the following answers apply if you want to execute a JS file received as response of a XHR Request.

Sol 1 using Eval:

xhr.onreadystatechange = function(){
 if( xhr.readyState === 4 ){
    eval ( xhr.responseText );
 }
}

Sol 2 using dynamic injection

xhr.onreadystatechange = function(){
  if ( xhr.readystate === 4 ){
    var head = document.getElementsByTagName("HEAD")[0];
    var script = document.createElement("SCRIPT");
    script.text = xhr.responseText;
    head.appendChild(script);
  } 
}

This will create a script element in the head and set it text to the AJAX response. With this, your JS will be parsed but wont be executed. If you want it to execute instantly, you can deliberately call it in the last line in the response like this:

//JS that you fetch
function A(){
}

// call A here so that it executes when this script is injected.
A()

The only problem with the above solutions is the same domain restriction that XHR brings to you. If you want to include scripts dynamically from different domains, you can use something even simpler:

var scr = document.createElement("SCRIPT");
scr.src = "dynamically set this to the external script source"
document.getElementsByTagName("HEAD")[0].appendChild(scr);

There are other approaches like the IFRAME approach as mentioned by other responses.