Execute javascript function on a page sent via AJAX response

Question

I want to execute a function that is sent over AJAX request from the server. The function body isn't in the calling page. For example: (the complete code is given below)

1.calling PHP script:

<script>
 function fun()
 {
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }  
 ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){

            document.getElementById("rslt").innerHTML = ajaxRequest.responseText;


        }
    }

    ajaxRequest.open("GET", "ajax_js2.php", true);
    ajaxRequest.send(null);

 }
</script>
<input type="button" onclick="fun()">
<div id="rslt">
</div>

2.ajax_js2.php script:

<script>
 function test()
 {
   alert("Hello");
 }
</script>
<span onclick="test()">Test AJAX</span>

I know putting the function definition of "test" in the calling script will do. But I want to keep it in the second script.What should I do ? The server returns the span as a response to the client. While clicking upon the span "Test AJAX" the function should be called.

Good question - sadly can't help but would you mind explaining WHY you want to run a script not embedded in the page? Seems a bit of an odd way to do it IMHO. You control both the calling page and the ajax so you can send the script you need when it is loaded NYET? — Robert Seddon-Smith, Sep 06 '13 at 11:22
Does it also return the script block in the response? Ajax calls usually strip off scripts for security reasons. — lshettyl, Sep 06 '13 at 11:22
yeah, I am not sure whether the script block (javascript) would be returned or not. But I want to do this in order to restrict page size of the calling PHP script where the page is heavily loaded with scripts @LShetty — Parveez Ahmed, Sep 06 '13 at 11:29
Its just an example, what if there are too many statements and other function calls ? @rps — Parveez Ahmed, Sep 06 '13 at 11:35
in your case I had advice you use a seperate JS files and write your script codes in them then import them in your pages as needed! — , Sep 06 '13 at 11:39
@rosemary,copy paste your script code to a text editor and save it as a JS file (say myscript.js) then move that file to the folder that has your php page then you can link to that JS file using ``, http://www.mkyong.com/javascript/how-to-link-an-external-javascript-file/ — , Sep 07 '13 at 16:30
@rps yeah, thanks 4 ur response. But that is what I do with my project.But it doesn't give a better solution. — Parveez Ahmed, Sep 08 '13 at 02:58

score 7 · Accepted Answer · edited May 23 '17 at 12:30

<script> tags inserted into the DOM will not be executed, unless you run eval(). Read more here: Can scripts be inserted with innerHTML?

So in your case, test() will be undefined when you try to click on the span because the script code has not been executed (thus never defined the test function).

You can get around it using something like this (after the DOM injection):

var scripts = document.getElementById("rslt").getElementsByTagName("script");
for( var i=0; i<scripts.length; i++ ) {
    eval(scripts[i].innerText);
}

(p.s. eval is not evil)

Execute javascript function on a page sent via AJAX response

1 Answers1

Linked