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 
    (
        controller, 
        {
            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.

Answers:

Answer

The parameter is:

evalScripts:true

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

See: http://www.prototypejs.org/api/ajax/updater

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.

Answer

Does setting evalScripts: true as an option help?

Answer

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

Answer

Just execute a custom my_function() after the ajax response

div.innerHTML=...ajax response text...
my_function()

then execute any function inside the custom my_function()

function my_function() {
  function_1()
  ...
}

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

Answer

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 {
    eval(scripts[x]);
}
catch(ex) {
}
}
return source;
}

alliteratively for more information see this http://www.yasha.co/Ajax/execute-javascript-on-Ajax-return/article-2.html

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.