javascript code being returned through ajax, but not displaying

Question

So basically I am using jQuery post to do an ajax call to an external php page and then I echo out the result, and then display it on the actual page.

The problem is, whenever the external php page returns some javascript, it's not being displayed on the actual page.

Javascript being returned

<script type="text/javascript">z_media = "SQgeKL07Nr"; z_autoplay=false; z_width=899; z_height=506;</script><script type="text/javascript" src="http://www.zunux.com/static/js/embed.js"></script>

My jQuery

function videoGrabber(mirror_id, video_version, firstVideo_version, videoNumber) {


        jQuery.post("/path/to/my/external/php/file.php", {firstParam : mirror_id, secondParam : video_version, thirdParam : firstVideo_version}, function(data) {
            //this is your response data from serv
        console.log(data);
        jQuery('#videoContainer').html(data);

    });
        return false;
}

Now generally, when iframes are being returned, they are showing perfectly fine in the #videoContainer id, however, whenever that javascript embed code is being returned, it's not displaying anything in the #videoContainer id. But I can definitely confirm that the external php page is returning the data since I can see it in the console. So, how can I fix this?

What do you expect to show up in #videoContainer? Your JS script just has a few variables... there is no visible content and nothing that calls a JS function. — Steve
– Steve, Commented Aug 30, 2013 at 4:02

Eric · Accepted Answer · 2013-08-30 03:32:42Z

1

Try adding an eval() to actually run the Javascript code you're retrieving:

function videoGrabber(mirror_id, video_version, firstVideo_version, videoNumber) {
    jQuery.post("/path/to/my/external/php/file.php", {firstParam : mirror_id, secondParam : video_version, thirdParam : firstVideo_version}, function(data) {
        //this is your response data from serv
        console.log(data);
        jQuery('#videoContainer').html(data);
        eval(data);
    });
    return false;
}

BTW be sure you have good security-- eval() has a lot of potential for mayhem if someone can intercept the ajax call and inject their own code.

Oh, and since eval() is going to try to evaluate just Javascript code, you need to change your return code to just raw JS code (no <script> tags):

z_media = "SQgeKL07Nr"; z_autoplay=false; z_width=899; z_height=506;

The only other thing to deal with is this:

<script type="text/javascript" src="http://www.zunux.com/static/js/embed.js"></script>

Can you include that script in the calling page (the one with the ajax code), then trigger it from the code you get via ajax? So your ajax code would ultimately return something like:

z_media = "SQgeKL07Nr"; z_autoplay=false; z_width=899; z_height=506; triggerEmbedScript();

edited Aug 30, 2013 at 3:32

answered Aug 30, 2013 at 3:03

Eric

5,22510 gold badges45 silver badges75 bronze badges

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

5 Comments

Maaz Over a year ago

For some odd reason, I'm getting this error Uncaught SyntaxError: Unexpected token <. Not exactly sure why, I only added eval(data);

Maaz Over a year ago

should eval(data) be put before the (#videoContainer).html(data) ?

Eric Over a year ago

It's trying to interpret the JS code, starting with "<script type="text/javascript">"... your eval is in the right place. It's just trying to evaluate Javascript, not the <script> tag surrounding the code. So first, try this to confirm: change your file that is returned by ajax to just say "alert('hello');" and you should see the alert after the ajax call. I'll update my answer.

Maaz Over a year ago

the triggerEmbedScript(); part, that's a function that i'll have to create? if I simply include this in the calling page <script type="text/javascript" src="http://www.zunux.com/static/js/embed.js"></script> and then just call the rest through jQuery, that'll be fine?

Eric Over a year ago

That may work. I'd give it a try. The issue is that you can't put the <script> tag into the JS that is returned by the ajax call.

Corey Ogburn · Accepted Answer · 2013-08-30 03:13:31Z

0

For security's sake, I would avoid requesting outside javascript and then blindly running it, eval or otherwise. If I were you, I'd return those variables in a JSON object. As for the extra script, I'd have that already loaded and just call it when I need it.

You mention returning iframes and how they work properly. Do you mean to say that your php file could return any HTML to directly insert into your #videoContainer? I would also avoid that. The data returned by the AJAX request has just finished passing through unknown territory: the internet. A better structure can help prevent MITM attacks or XSS.

answered Aug 30, 2013 at 3:13

Corey Ogburn

24.9k33 gold badges120 silver badges200 bronze badges

1 Comment

Maaz Over a year ago

I'm using wordpress. I've created a function in the functions.php file, the external php file just runs that function.

Steve · Accepted Answer · 2013-08-30 04:05:01Z

As I mentioned in my comment above, your returned JS code does not really do anything. It just defines a few (global) variables. There is no visible content that could show up in #videocontainer and the JS is not calling any functions that could trigger some behavior.

That being said, if you want to load and execute some JS that you get from an AJAX call, I would recommend that instead of trying to add the whole script tag with content, to do the following:

var script = document.createElement("script");
script.type = "text/javascript";
script.text  = data;
document.body.appendChild(script);

Of course this only works if you can alter the data you get from your AJAX call to this string (without the tags):

'z_media = "SQgeKL07Nr"; z_autoplay=false; z_width=899; z_height=506;'

Altogether, your code would look like this:

function videoGrabber(mirror_id, video_version, firstVideo_version, videoNumber) {
    jQuery.post("/path/to/my/external/php/file.php", {firstParam : mirror_id, secondParam : video_version, thirdParam : firstVideo_version}, function(data) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.text  = data;
        document.body.appendChild(script);
    });
    return false;
}

Collectives™ on Stack Overflow

javascript code being returned through ajax, but not displaying

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related