How to Force Javascript to Execute within HTML Response to Ajax Request

We're using Prototype for all of our Ajax request handling and to keep things simple we simple render HTML content which is then assigned to the appropriate div using the following function:

function ajaxModify(controller, parameters, div_id)
    var div = $(div_id);

    var request = new Ajax.Request 
            method: "post",
            parameters: parameters,
            onSuccess: function(data) {
                div.innerHTML = data.responseText;
            onFailure: function() {
                div.innerHTML = "Information Temporarily Unavailable";  

However, I occasionally need to execute Javascript within the HTML response and this method appears incapable of doing that.

I'm trying to keep the list of functions for Ajax calls to a minimum for a number of reasons so if there is a way to modify the existing function without breaking everywhere that it is currently being used or a way to modify the HTML response that will cause any embedded javascript to execute that would great.

By way of note, I've already tried adding "evalJS : 'force'" to the function to see what it would do and it didn't help things any.



The parameter is:


Note that you should be using Ajax.Updater, not Ajax.Request


Ajax.Request will only process JavaScript if the response headers are:

application/ecmascript, application/javascript, application/x-ecmascript, application/x-javascript, text/ecmascript, text/javascript, text/x-ecmascript, or text/x-javascript

Whereas Ajax.Updater will process JS is evalScripts:true is set. Ajax.Request is geared toward data transport, such as getting a JSON response.

Since you are updating HTML you should be using Ajax.Updater anyways.


Does setting evalScripts: true as an option help?


You should be able to do something like this:

div.innerHTML = "<div onclick='someOtherFunctionTocall();'>";

If you need to execute something at the same time as injecting the HTML, can you modify the signature of ajaxModify() by passing another parameter, which will be the javascript function you're going to execute (if it's not null - which let's you keep it optional, as you surely won't want to execute something on EVERY AJAX response).


Just execute a custom my_function() after the ajax response

div.innerHTML=...ajax response text...

then execute any function inside the custom my_function()

function my_function() {

Note that my_function() should be somewhere outside the div.innerHTML.


you need to use eval() function to run the javascript in Ajax repose this can be use full to separate the script and run it


function PaseAjaxResponse(somemixedcode)
    var source = somemixedcode;
    var scripts = new Array();
    while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
    var s = source.indexOf("<script");
    var s_e = source.indexOf(">", s);
    var e = source.indexOf("</script", s);
    var e_e = source.indexOf(">", e);
    scripts.push(source.substring(s_e+1, e));
    source = source.substring(0, s) + source.substring(e_e+1);
for(var x=0; x<scripts.length; x++) {
try {
catch(ex) {
return source;

alliteratively for more information see this


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.