load next xml element on click via ajax and jquery -
i need able cycle through xml file using click function. when page loads want 1 xml element load , using click function load next. kind of content slider loads each 1 when requested. i'm using display tube video title.
here's code...
$(document).ready(function(){ $.ajax({ type: "get", url: "video.xml", datatype: "xml", success: function(xml) { $(xml).find('video').each(function(){ var title = $(this).find('title').text(); var embed = $(this).find('embed').text(); $('<div class="video"></div>').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+' frameborder="0"></iframe><h2>'+title+'</h2>').appendto('#video_block'); }); } }); });
here xml code:
<video> <title>title 1 here</title> <embed>fscjfrh80uy</embed> </video> <video> <title>title 2 here</title> <embed>fscjfrh80uy</embed> </video>
many help.
edit
here current code - needed slight couple of tweaks because of errors...
$(document).ready(function(){ var = 0; getvid(); $('#prev').bind('click', function() { i--; getvid(); $('.video').remove() return false; }) $('#next').bind('click', function() { i++; getvid(); $('.video').remove() return false; }) function getvid() { $.ajax({ type: "get", url: "video.xml", datatype: "xml", success: function(xml) { ovid = $(xml).find('video:eq('+i+')'); var title = ovid.find('title').text(); var embed = ovid.find('embed').text(); $('<div class="video"></div>').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+'" frameborder="0"></iframe><h2>'+title+'</h2>').appendto('#video_block'); } }); } });
it kind of works following problems exist:
- it needs show first xml element default - shows nothing. ***i know have working. put getvid() before click event functions!
- when hit "next" first time starts on 2nd xml element.
- when hit "next" on last element needs go first. tries find next element comes nothing (as nothing exists after last!)
many again!!!!!
var = 0; $('#prev').bind('click', function() { i--; getvid(); } $('#next').bind('click', function() { i++; getvid(); } function getvid() { $.ajax({ type: "get", url: "video.xml", datatype: "xml", success: function(xml) { ovid = $(xml).find('video:eq('+i+')'); var title = ovid.find('title').text(); var embed = ovid.find('embed').text(); $('#videodiv').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+' frameborder="0"></iframe><h2>'+title+'</h2>'); } }); });
this code not directly work it's idea. play , you'll going.
edit
i forgot increase i, that's why click event didn't work!
edit2
if make button id 'prev' , button id 'next' above edited code should work.
Comments
Post a Comment