CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
Maaz
Maaz

Reputation: 4303

javascript code being returned through ajax, but not displaying

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?

Upvotes: 5

Views: 998

Answers (3)

Steve
Steve

Reputation: 8640

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;
}

Upvotes: 0

Eric
Eric

Reputation: 5215

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

Upvotes: 1

Corey Ogburn
Corey Ogburn

Reputation: 24717

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.

Upvotes: 0

Related Questions