Solved

JQuery function execution structure issue

Posted on 2010-11-23
2
686 Views
Last Modified: 2012-05-10
Hello,

Hello,

I would like to run the jquery code in the $(document).ready(function() prior to the included js code in the jquery.youtubeplaylist.js file.  I would basically like to dynamically construct the LI and A elements and append them to the UL element prior to jquery.youtubeplaylist.js execution since it operates on it.  Is this possible?  The $(this).parent().parent("ul").find("li.currentvideo").removeClass("currentvideo"); throws a JS error saying its undefined or null.  I've tried moving all the script inside the document.ready function but got the same result.

HTML page:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
	var videoUL = $('#videoList');
	$.get("getVideos.php", function(theXML){
		$('video',theXML).each(function(i){  
			var videoId = $(this).find("id").text();
			var videoURL = $(this).find("url").text();
			var videoCaption = $(this).find("caption").text();			
			var liVideo=$(document.createElement("li"));			
			var videoLinkText = $(document.createTextNode(videoCaption));	
			var videoLink = $(document.createElement("a"))
				.attr("href", videoURL)											 
				.append(videoLinkText);	
			liVideo.append(videoLink);
			videoUL.append(liVideo);
		});
	});
	alert(videoUL.html());
});
</script>
<script type="text/javascript" src="jquery.youtubeplaylist.js"></script>
<script type="text/ecmascript">
		$(function() {
			$("ul.demo2").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo2', allowFullScreen:true});
		});
</script>

<style type="text/css">
.demo2 {
float:left;
margin:0;
padding:0;
width:350px;
height:440px;
overflow-x:hidden;
overflow-y:scroll;
}
#ytvideo2 {
    float: left;
	margin-right:10px;
	margin-left:25px;
}
.yt_holder {
    background: #f3f3f3;
    padding: 10px;
    float: left;
    border: 1px solid #e3e3e3;
	margin-bottom:15px;
}
ul {
    float: left;
    margin: 0;
    width: 345px;
}
ul li {
    list-style-type: none;
    display:block;
    background: #f1f1f1;
    float: left;
    width: 345px;
    margin-bottom: 5px;
}
ul li img {
    width: 120px;
    float: left;
    margin-right: 5px;
    border: 1px solid #999;
}
ul li a {
   font-family: georgia;
    text-decoration: none;
    display: block;
    color: #000;
    width: 345px;
	height: 90px;
    padding:2px;
}
.currentvideo {
	background: #ffffec;
}	
</style>
</head>
<body>
	<div id="page">           
    <div class="yt_holder">
        <ul id="videoList" class="demo2">
        </ul>
		<div id="ytvideo2"></div>
    </div>   
    </div>
</body>
</html>

Open in new window


jquery.youtubeplaylist.js:
//-------------------------------------------------
//		youtube playlist jquery plugin
//		Created by dan@geckonm.com
//		www.geckonewmedia.com
//
//		v1.1 - updated to allow fullscreen 
//			 - thanks Ashraf for the request
//-------------------------------------------------
jQuery.fn.ytplaylist = function(options) {
  // default settings
  var options = jQuery.extend( {
    holderId: 'ytvideo',
	playerHeight: '440',
	playerWidth: '658',
	addThumbs: false,
	thumbSize: 'small',
	showInline: false,
	autoPlay: true,
	showRelated: true,
	allowFullScreen: false
  },options);
  return this.each(function() {
   		var selector = $(this);
		var autoPlay = "";
		var showRelated = "&rel=0";
		var fullScreen = "";
		if(options.autoPlay) autoPlay = "&autoplay=1"; 
		if(options.showRelated) showRelated = "&rel=1"; 
		if(options.allowFullScreen) fullScreen = "&fs=1"; 
		//throw a youtube player in
		function play(id)
		{
		   var html  = '';
		   html += '<object height="'+options.playerHeight+'" width="'+options.playerWidth+'">';
		   html += '<param name="movie" value="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"> </param>';
		   html += '<param name="wmode" value="transparent"> </param>';
		   if(options.allowFullScreen) { 
		   		html += '<param name="allowfullscreen" value="true"> </param>'; 
		   }
		   html += '<embed src="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"';
		   if(options.allowFullScreen) { 
		   		html += ' allowfullscreen="true" '; 
		   	}
		   html += 'type="application/x-shockwave-flash" wmode="transparent"  height="'+options.playerHeight+'" width="'+options.playerWidth+'"></embed>';
		   html += '</object>';
		   return html;
		};
		//grab a youtube id from a (clean, no querystring) url (thanks to http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html)
		function youtubeid(url) {
			var ytid = url.match("[\\?&]v=([^&#]*)");
			ytid = ytid[1];
			return ytid;
		};
		//load inital video
		var firstVid = selector.children("li:first-child").addClass("currentvideo").children("a").attr("href");
		$("#"+options.holderId+"").html(play(youtubeid(firstVid)));
		//load video on request
		selector.children("li").children("a").click(function() {
			if(options.showInline) {
				$("li.currentvideo").removeClass("currentvideo");
				$(this).parent("li").addClass("currentvideo").html(play(youtubeid($(this).attr("href"))));
			}
			else {
				$("#"+options.holderId+"").html(play(youtubeid($(this).attr("href"))));
				$(this).parent().parent("ul").find("li.currentvideo").removeClass("currentvideo");
				$(this).parent("li").addClass("currentvideo");
			}
			return false;
		});
		//do we want thumns with that?
		if(options.addThumbs) {
			selector.children().each(function(i){
				var replacedText = $(this).text();
				if(options.thumbSize == 'small') {
					var thumbUrl = "http://img.youtube.com/vi/"+youtubeid($(this).children("a").attr("href"))+"/2.jpg";
				}
				else {
					var thumbUrl = "http://img.youtube.com/vi/"+youtubeid($(this).children("a").attr("href"))+"/0.jpg";
				}
				$(this).children("a").empty().html("<img src='"+thumbUrl+"' alt='"+replacedText+"' />"+replacedText).attr("title", replacedText);
			});	
		}
  });
};

Open in new window



0
Comment
Question by:cgray1223
2 Comments
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34204661

Perhaps loading the script dynamically will give you better control of any timing issues:

var js = document.createElement( "script" );
js.setAttribute( "type", "text/javascript" );
js.setAttribute( "src", "jquery.youtubeplaylist.js" );

Open in new window

0
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 34206783
Try moving the call to ytplaylist() into the success function of $.get() as below:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.youtubeplaylist.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function(){

	var videoUL = $('#videoList');

	$.get("getVideos.php", function(theXML){

		$('video',theXML).each(function(i){  

			var videoId = $(this).find("id").text();

			var videoURL = $(this).find("url").text();

			var videoCaption = $(this).find("caption").text();			

			var liVideo=$(document.createElement("li"));			

			var videoLinkText = $(document.createTextNode(videoCaption));	

			var videoLink = $(document.createElement("a"))

				.attr("href", videoURL)											 

				.append(videoLinkText);	

			liVideo.append(videoLink);

			videoUL.append(liVideo);

			alert(videoUL.html());

			$("ul.demo2").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo2', allowFullScreen:true});

		});

	});

});

</script>



<style type="text/css">

.demo2 {

float:left;

margin:0;

padding:0;

width:350px;

height:440px;

overflow-x:hidden;

overflow-y:scroll;

}

#ytvideo2 {

    float: left;

	margin-right:10px;

	margin-left:25px;

}

.yt_holder {

    background: #f3f3f3;

    padding: 10px;

    float: left;

    border: 1px solid #e3e3e3;

	margin-bottom:15px;

}

ul {

    float: left;

    margin: 0;

    width: 345px;

}

ul li {

    list-style-type: none;

    display:block;

    background: #f1f1f1;

    float: left;

    width: 345px;

    margin-bottom: 5px;

}

ul li img {

    width: 120px;

    float: left;

    margin-right: 5px;

    border: 1px solid #999;

}

ul li a {

   font-family: georgia;

    text-decoration: none;

    display: block;

    color: #000;

    width: 345px;

	height: 90px;

    padding:2px;

}

.currentvideo {

	background: #ffffec;

}	

</style>

</head>

<body>

	<div id="page">           

    <div class="yt_holder">

        <ul id="videoList" class="demo2">

        </ul>

		<div id="ytvideo2"></div>

    </div>   

    </div>

</body>

</html>

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now