how to execute ajax output script

Question

I\'m getting an ajax output success data.

Where the data contains some html text and a script.

But the script is not executing, how can I execute the script.

Answer 1

Assuming you are not using JSON or jQuery, or any other library, and your AJAX call returns some HTML and/or javascript which is being added to your existing document (eg. using innerHTML), any javascript returned using AJAX will not execute in the browser - except for events on elements in the HTML.

So if your AJAX call returns <input type="button" value="Click me" onclick="alert('hello');" />, the js alert will work ok, but if your AJAX call returns <script type="text/javascript">alert('hello');</script> it will not execute. In that case, you would have to parse the result to extract the javascript and execute it, using a function such as this:

function extract_and_execute_js(output_to_parse)
{    
    if(output_to_parse != '')    
    {    
        var script = "";
        output_to_parse = output_to_parse.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){if (output_to_parse !== null) script += arguments[1] + '\n';return '';});
        if(script) 
        {
            if (window.execScript)
            {
                window.execScript(script);
            }
            else
            {
                window.setTimeout(script, 0);
            }
        }
    }
}

Answer 2

If you are retrieving the JSON formatted result from AJAX call, you can just use eval to execute the javascript.

Assume, if the result json is formed like this

   var res =  '{"Data": "<something>",
              "script": "alert(something)"}';

   var out = eval("(" + res + ")");
   var data = out.data;
   eval(out.script);

Answer 3

Not sure if you are using a library, but with Prototype I had to set

evalScripts: true

before JavaScript would be eval-ed. See here for more info:

http://www.sergiopereira.com/articles/prototype.js.html#UsingAjaxRequest

Answer 4

Using jQuery here is a simple bit of code:

$.ajax({
    type: "POST",
    url: "getData.asmx/HelloWorld",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(result) {
        alert(result);
    }
});

But, to actually use the results of the variable result I ended up using a javascript library, from http://www.json.org/js.html, I did:

success: function(result) {
    var myData = JSON.parse(result.d);

There are probably better approaches, but this was simple, and worked for me, so I just use this. Later, when the project is in production I may go back and clean this up, but that is after I get everything working.

Answer 5

Interestingly enough, I use jQuery and using the html() function was enough to get the JavaScript to execute. So more or less I had nothing special to do.

There is a simplified version:

var myform = $('form#form-id');
$.post(myform.attr('action'), myform.serialize(), function(response) {
  $('#some-id').html(response.message);
}

In my case the code kicked in automatically so I did not need any other of the solutions proposed here.