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
– Robert Seddon-Smith, Commented Sep 6, 2013 at 11:22
Does it also return the script block in the response? Ajax calls usually strip off scripts for security reasons. — lshettyl
– lshettyl, Commented Sep 6, 2013 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
– Parveez Ahmed, Commented Sep 6, 2013 at 11:29
Its just an example, what if there are too many statements and other function calls ? @rps — Parveez Ahmed
– Parveez Ahmed, Commented Sep 6, 2013 at 11:35

Community · Accepted Answer · 2017-05-23 12:30:30Z

8

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

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Sep 6, 2013 at 11:27

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Execute javascript function on a page sent via AJAX response

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related