DOM script insertion

Question

I have been meaning to insert a small script into the DOM at runtime in order to load a video player. but the player gets loaded in all different places except the <div> where i want it to be. i dont understand how to deal with this. i am pasting the entire code here. please help me out.

<html>
<head><title>video test</title>
<script type="text/javascript" src="resources/js/jquery.js"></script>
<script type="text/javascript" src="swf.js"></script>
<script type="text/javascript">

$(document).ready(function(){
//  debugger;
    var template = $('<div class="sResult"><div class="figure"></div><div class="title"></div></div>');
    var url = 'http://player.ooyala.com/player.js?width=320&amp;height=240&amp;embedCode=thbXMxMzpq0RhOS82Hzx1lma8UMnFN-3&amp;callback=apicallback';
    var tempScript = document.createElement('script');
    tempScript.type = 'text/javascript';
    tempScript.src = url;

    $("#main").append(template);


    $("div.figure", $('#main')).html(tempScript);
    $("div.title", $('#main')).append("testkjdfnkjdb");

})
</script>   

</head>
<body>
    <div id="main"></div>
</body>
</html>

the append procedure for div.title is working fine. but the div in which i am trying to append the video player is not working correctly. the video player is getting appended to the <head>

EDIT: can some javascript guru please look into the player.js and tell me why isn't it working for me?

the player <div> contains the following:

<div style="width: 320px; height: 240px; overflow: hidden;" id="ooyalaPlayer6764909_10qreejOoyalaPlayerOutterWrapper"><object width="320" height="240" type="application/x-shockwave-flash" id="ooyalaPlayer6764909_10qreej" class="OoyalaVideoPlayer" data="http://player.ooyala.com/static/cacheable/fb1a00342b9ec2d6df7c69946617dcee/player_v2.swf"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="bgcolor" value="#000000"><param name="wmode" value="window">
<param name="flashvars"></object></div>

You're mixing javascript node creation with jQuery node creation. Picking one method will help you to see your error. — JesseBuesking, Dec 07 '11 at 19:57

score 2 · Accepted Answer · answered Dec 08 '11 at 03:07

2

You can also provide the Ooyala player with a targetReplaceId=(element id) query string parameter to force it to replace an item on page.

answered Dec 08 '11 at 03:07

chrisl

246
1
4

Gabriel Gartz · Answer 2 · 2011-12-07T20:27:11.463

1

First fix your URL, passing the playerId param.

    var url = 'http://player.ooyala.com/player.js?playerId=player&width=320&amp;height=240&amp;embedCode=thbXMxMzpq0RhOS82Hzx1lma8UMnFN-3&amp;callback=apicallback';

Create an listener for tempScript loader and append the player script to the header:

$(tempScript).load(function() {
     $('#main').find('div.figure').append($('head>div'));
});
$('head')[0].appendChild(tempScript);

In the listener move the content from player where you want just re-append it.

I supose that the problem is in the player.js, not where you attach the script loader.

Ooyala API Docs: http://ooyala.com/support/docs/player_api#javascript

edited Dec 07 '11 at 20:27

answered Dec 07 '11 at 19:57

Gabriel Gartz

2,840
22
24

the text in the title is getting appended just fine. by your approach and by my approach. but the video player is getting appended in the section – amit Dec 07 '11 at 20:00
And if you try a appendChild, like: $(template).find("div.figure")[0].appendChild(tempScript); but I supose that the problem is inside your player.js file... What the ID from player element that is appended to ? – Gabriel Gartz Dec 07 '11 at 20:02
the id of the player element appended to head is "ooyalaPlayer6764909_10qreejOoyalaPlayerOutterWrapper" – amit Dec 07 '11 at 20:07
It have any other identifier, like a class, or a div, or player element? – Gabriel Gartz Dec 07 '11 at 20:12
i have edited the question to include teh generated player's HTML code – amit Dec 07 '11 at 20:16
Try instead $('player') this: $('head>div'), and see what you get, or use the player API: http://www.ooyala.com/support/docs/player_api#javascript – Gabriel Gartz Dec 07 '11 at 20:20
it still isnt getting appended to the
– amit Dec 07 '11 at 20:26

score -1 · Answer 3 · answered Dec 07 '11 at 19:49

-1

Your selector is wrong:

$("#main div.figure").html(tempScript);

etc..

answered Dec 07 '11 at 19:49

buddhabrot

1,558
9
14

that was not the point. the point is the DOM insertion of the script. – amit Dec 07 '11 at 19:51
Yes, and your selector is wrong, it is incorrect jQuery syntax. – buddhabrot Dec 07 '11 at 19:52

DOM script insertion

3 Answers3