Executing JavaScript code retrieved via AJAX?

Question

I've condensed my problem into the following sample code:

<?php 
if($_GET['ajax']){
    echo '  <script type="text/javascript">
                alert("test alert");
                var newdata="Hello Again!";
                $(container).append(newdata);
            </script>';
    exit();
}
?>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var container = document.getElementById('testdiv');
            var data = 'Hello World' ;
            $(container).append(data);
        });
        function goAjax(){
            $.ajax({
                url: '/test.php/?ajax=1',
                type: "POST",
                data: {"xxx":1},
                success: function(data){
                    $("#return").empty();
                    $("#return").append(data);
                }
            });
        };
        </script>
    </head>
    <body>
        <a href="#" onclick="goAjax();">test</a>
        <div id="testdiv"></div>
        <div id="return"></div>
    </body>
</html>

What I'm trying to do is load in the JS script located at the top of the code into the web page and have it execute.

The alert() executes fine, but I cannot get Hello Again! to show up. It is not executing that part of the script.

Can someone help to explain why?

Note that the use of a reference defined earlier (container) is vital to my problem, and a workaround involving a direct reference does not solve things for me.

Thanks!

Have a lok at [`jQuery.getScript()`](http://api.jquery.com/jQuery.getScript/), it does exactly what you want. — try-catch-finally, Dec 22 '14 at 12:33
@try-catch-finally: Thanks for the suggestion, I did not know about that. Unfortunately, along with the script, there is other code I am loading in as well - so ideally I'm looking for a one-hit solution. — R C, Dec 22 '14 at 12:37
What does it mean, that you're loading other code as well? The request will return not only Javascript (e.g. data, text, html) or other script content you won't execute? — try-catch-finally, Dec 22 '14 at 12:40

score 0 · Answer 1 · answered Dec 22 '14 at 12:36

0

One way to that is to inject that script to DOM by using

var script = document.createElement('script');
script.innerText =  'code retrieved from ajax';
document.appendChild(script);

Other way is jQuery.getScript() from the jQuery.

answered Dec 22 '14 at 12:36

apsdehal

845
2
10
27

And the third (and most dangerous) way is to `eval()` the code itself. – Shomz Dec 22 '14 at 12:38
Thanks guys. As per my comment above, there is other code I am loading in as well (not just the script) - so ideally I'm looking for a one-hit solution where I can append a ` – R C Dec 22 '14 at 12:39
See this for more detail: http://stackoverflow.com/questions/13167403/is-javascript-eval-so-dangerous – apsdehal Dec 22 '14 at 12:39

score 0 · Accepted Answer · answered Dec 22 '14 at 12:38

0

I'd guess that the Hello Again text is not displaying because the container variable referenced is not available globally. You are defining container as a local variable here:

$(document).ready(function(){
    var container = document.getElementById('testdiv');
    var data = 'Hello World' ;
    $(container).append(data);
});

So, try defining container globally. Or simply re-select the #testdiv in your returned script (instead of referencing container at all).

For running the script, instead of messing with <script>s yourself, I'd definitely recommend just using jQuery.getScript.

answered Dec 22 '14 at 12:38

James

109,676
31
162
175

Yes, exactly correct on variable definition. In my example above, how exactly do I define `container` globally so that it can be used within the injected script? – R C Dec 22 '14 at 12:45
@RC You can, instead of doing `var container = `, just do `window.container = `. Typically it's not a good idea to define variables globally but that's probably a topic for another day :D – James Dec 22 '14 at 12:49
James, perfect, thank you. Problem solved. This is for a small internal system with limited potential for disaster or security issues etc, so functionally this will work just fine for us. – R C Dec 22 '14 at 12:52

Executing JavaScript code retrieved via AJAX?

2 Answers2