execute inline js loaded via ajax

Question

hi and thanks for stopping.

i already solved my problem, but on my own, so i just want to share my solution and maybe someone has a more elegant way to solve it. maybe its just nice as it is.

so im loading some html via jquery.ajax() and the dataType is html. sometimes a video is placed inside, and the most elegant way for me to embed this, is the jwplayers js embed code, that looks like this:

<script>
    jwplayer("mediaplayer").setup({
        flashplayer: "/player.swf",
        image: "/image.jpg",
        autostart: true,
        'controlbar': 'none',
        file: "/video.m4v",
        width: 752,
        height: 416
    });
</script>

now if i load this, nothing happens, the js just doesnt get executed.

so i ended up putting the js WITHOUT the script tags into a div.

<div id="vc">
    jwplayer("mediaplayer").setup({
        ...
    });
</div>

and then in my ajaxComplete() call i simply move the stuff out of the div and place it in between two script tags.

if ($("#vc").text() !== "") {
    var vjs = $("#vc").text();
    $("#vc").empty().html("<script>"+vjs+"</script>");
}

Javascript eval() the function?

XCS
– XCS

2012-02-22 12:05:48 +00:00
Commented Feb 22, 2012 at 12:05 — XCS
– XCS, Commented Feb 22, 2012 at 12:05

Darin Dimitrov · Accepted Answer · 2012-02-22 12:11:40Z

2

Define a function:

<script type="text/javascript">
    var embedPlayer = function() {
        jwplayer("mediaplayer").setup({
            flashplayer: "/player.swf",
            image: "/image.jpg",
            autostart: true,
            'controlbar': 'none',
            file: "/video.m4v",
            width: 752,
            height: 416
        });
    };
    embedPlayer();
</script>

and then in the success callback you could call this function:

$.ajax({
    url: '/foo',
    success: function(result) {
        $('#container').html(result);
        embedPlayer();
    }
});

answered Feb 22, 2012 at 12:11

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

5 Comments

Khodor Over a year ago

oh, i told him to use eval() instead of calling a function! stupid me!

honk31 Over a year ago

i tried this yesterday (and now again), but i get an "embedPlayer is not defined" if i call embedPlayer() on success.

DG. Over a year ago

@Kheu using eval is no more dangerous that what OP is currently doing nor more dangerous that blindly wrapping the code in a function. That is to say, they are all dangerous.

DG. Over a year ago

@honk31 - I'm not surprised. If adding code to the page by setting innerhtml doesn't execute the function call inside the code, then I don't see why it would define a function inside the code.

Stefano Mozart Over a year ago

If the parameters, or the whole script must be loaded dynamically, then, there is not much of choice, but to use eval()

Khodor · Accepted Answer · 2012-02-22 12:12:12Z

1

although it is not recommended, user eval();

if ($("#vc").text() !== "") {
    eval($("#vc").text())
}

answered Feb 22, 2012 at 12:12

Khodor

1,0071 gold badge7 silver badges13 bronze badges

Collectives™ on Stack Overflow

execute inline js loaded via ajax

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related