jQuery Dialog

Hello,

Sorry for being lengthy but I need to explain.

Basically I have a list of YouTube movie clips and each clip has several parts.  I saved in an xml file like this:

<?xml version="1.0"?>
<YouTubeVideos>
<title>Title1
<video img="//i1.ytimg.com/vi/tqYPa8lKR54/default.jpg" id="tqYPa8lKR54" part="18"/>
<video img="//i2.ytimg.com/vi/QN8sXocf6go/default.jpg" id="QN8sXocf6go" part="17"/>
...
<video img="//i3.ytimg.com/vi/zDdiJTohGFg/default.jpg" id="zDdiJTohGFg" part="1"/>
</title>
<title>Title2
<video img="//i2.ytimg.com/vi/AhXBvK0x9fg/default.jpg" id="AhXBvK0x9fg" part="17"/>
<video img="//i1.ytimg.com/vi/PzEdUMOBMRg/default.jpg" id="PzEdUMOBMRg" part="16"/>
...
<video img="//i1.ytimg.com/vi/PdiLp4Is_Bo/default.jpg" id="PdiLp4Is_Bo" part="1"/>
</title>
</YouTubeVideos>

Open in new window


I used PHP to generate parts of clip as pagination and stored them in alt attribute:

<a alt="<a href='#' id='zDdiJTohGFg' title='Title1 Part 1'>1</a>&nbsp;<a href='#' id='zygoonUyWsM' title='Title1 Part  2'>2</a>&nbsp;..."><br />
<a href='#' id='PdiLp4Is_Bo' title='Title2 Part 1' alt ="<a href='#' id='PdiLp4Is_Bo' title='Title2 Part 1'>1</a>&nbsp;<a href='#' id='AryzTAYL_EE' title='Title2 Part 2'>2</a>&nbsp;...">

Open in new window


and used jQuery Dialog to open the movie clips.  When I click a movie clip, it opens the dialog and plays the first part.  Below the movie clip, I  display the pagination which was stored in alt attribution.

My problem is when I click a movie clip, it opens dialog and display the pagination correctly.  But clicking on the pagination, it displays undefined.

How do I display the pagination respectively to its movie clip?  The problem is at the </object><br />"+$(this).attr('alt')); below      Please see my script:

<script type="text/javascript"> 
$(document).ready(function() {
	$('div#wrap-around-alist').append('<div id="dialogPopup"></div>');
    $('#dialogPopup').dialog({
    	width: 422,
        height: 400,
        modal:true,
        autoOpen: false,
        resizable:false
	});
    var dia = $('#dialogPopup');
    $('#wrap-around-alist a, #dialogPopup a').live('click', function(e) {
        e.preventDefault();
        var obj = $(this);        
        dia.html("<object width='420' height='345'>"+
                 "<param name='movie' value='http://www.youtube.com/v/"+$(this).attr('id')+
                 "?&autoplay=1&rel=0&version=3&amp;hl=en_US\'></param>"+
                 "<param name='allowFullScreen' value='true'></param>"+
                 "<param name='allowscriptaccess' value='always'></param>"+
                 "<embed src='http://www.youtube.com/v/"+$(this).attr('id')+
                 "?&autoplay=1&rel=0&version=3&amp;hl=en_US' type='application/x-shockwave-flash' "+
                 "width='420' height='345' allowscriptaccess='always' allowfullscreen='true'></embed></object><br />"+$(this).attr('alt'));     
        dia.dialog({title: $(this).attr('title')});
        dia.dialog('open');
    });

});
</script>

<div id="wrap-around-alist">

<img src=//i3.ytimg.com/vi/zDdiJTohGFg/default.jpg width=50 align="absmiddle" style="padding:5px" /><a href='#' id='zDdiJTohGFg' title='Title1 Part 1' alt ="<a href='#' id='zDdiJTohGFg' title='Title1 Part 1 1'>1</a>&nbsp;<a href='#' id='zygoonUyWsM' title='Title1 Part  2'>2</a>&nbsp;<a href='#' id='mAayWztl0CM' title='Title1 Part  3'>3</a>&nbsp;<a href='#' id='U_xHhWh6p4I' title='Title1 Part  4'>4</a>&nbsp;<a href='#' id='0hccubRSfNM' title='Title1 Part 5'>5</a>&nbsp;<a href='#' id='2xwjRHU_OOI' title='Title1 Part 6'>6</a>&nbsp;<a href='#' id='jt4QTPkcpA4' title='Title1 Part 7'>7</a>&nbsp;<a href='#' id='8hdD7Lh83NU' title='Title1 Part 8'>8</a>&nbsp;<a href='#' id='kFIpjXXcnpo' title='Title1 Part 9'>9</a>&nbsp;<a href='#' id='mb7k9UCzcCQ' title='Title1 Part 10'>10</a>&nbsp;<a href='#' id='-toRhiqV8ZA' title='Title1 Part 11'>11</a>&nbsp;<a href='#' id='N9oRSrCC8_0' title='Title1 Part 12'>12</a>&nbsp;<a href='#' id='2KeakcqSp1I' title='Title1 Part 13'>13</a>&nbsp;<a href='#' id='o4v-GWm7nQQ' title='Title1 Part 14'>14</a>&nbsp;<a href='#' id='BvLTQ9tJxMU' title='Title1 Part 15'>15</a>&nbsp;<a href='#' id='f8puiCEIx5Y' title='Title1 Part 16'>16</a>&nbsp;<a href='#' id='QN8sXocf6go' title='Title1 Part 17'>17</a>&nbsp;<a href='#' id='tqYPa8lKR54' title='Title1 Part 18'>18</a>&nbsp;">YouTube Clip 1</a> &nbsp; 18 Parts &nbsp;&nbsp;<img src="/images/videoicon.gif" /><br />

<img src=//i1.ytimg.com/vi/PdiLp4Is_Bo/default.jpg width=50 align="absmiddle" style="padding:5px" /><a href='#' id='PdiLp4Is_Bo' title='Title2 Part 1' alt ="<a href='#' id='PdiLp4Is_Bo' title='Title2 Part 1'>1</a>&nbsp;<a href='#' id='AryzTAYL_EE' title='Title2 Part 2'>2</a>&nbsp;<a href='#' id='CvXcPCKIpQc' title='Title2 Part 3'>3</a>&nbsp;<a href='#' id='kxzARHPp4TM' title='Title2 Part 4'>4</a>&nbsp;<a href='#' id='sbN3eNpDNHA' title='Title2 Part 5'>5</a>&nbsp;<a href='#' id='v8rd-llQnKA' title='Title2 Part 6'>6</a>&nbsp;<a href='#' id='rRLi0q7mfPs' title='Title2 Part 7'>7</a>&nbsp;<a href='#' id='YT_-8_xMtZo' title='Title2 Part 8'>8</a>&nbsp;<a href='#' id='YynlBHnm1-Q' title='Title2 Part 9'>9</a>&nbsp;<a href='#' id='6alBJVmEtIw' title='Title2 Part 10'>10</a>&nbsp;<a href='#' id='45ZUqgL4P4I' title='Title2 Part 11'>11</a>&nbsp;<a href='#' id='PaQdlquAbp8' title='Title2 Part 12'>12</a>&nbsp;<a href='#' id='bfGSq5gWx10' title='Title2 Part 13'>13</a>&nbsp;<a href='#' id='oZdQzcy54n8' title='Title2 Part 14'>14</a>&nbsp;<a href='#' id='Q4-j5zQLr2A' title='Title2 Part 15'>15</a>&nbsp;<a href='#' id='PzEdUMOBMRg' title='Title2 Part 16'>16</a>&nbsp;<a href='#' id='AhXBvK0x9fg' title='Title2 Part 17'>17</a>&nbsp;">YouTube Clip 2</a> &nbsp; 17 Parts &nbsp;&nbsp;<img src="/images/videoicon.gif" /><br />

</div>

Open in new window

Thank you in advance.
aline0508Asked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
Okeee, getting somewhere.

This will show the videos and create the links - I just need to switch video and create the new links when each link is clicked


<html>
<head>
<style type="text/css">
a{text-decoration:none}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
var YouTubeVideos = {
Title1: [
{id:'zDdiJTohGFg', title:'Title1 Part  1'},
{id:'zygoonUyWsM', title:'Title1 Part  2'},
{id:'mAayWztl0CM', title:'Title1 Part  3'},
{id:'U_xHhWh6p4I', title:'Title1 Part  4'},
{id:'0hccubRSfNM', title:'Title1 Part  5'},
{id:'2xwjRHU_OOI', title:'Title1 Part  6'},
{id:'jt4QTPkcpA4', title:'Title1 Part  7'},
{id:'8hdD7Lh83NU', title:'Title1 Part  8'},
{id:'kFIpjXXcnpo', title:'Title1 Part  9'},
{id:'mb7k9UCzcCQ', title:'Title1 Part 10'},
{id:'-toRhiqV8ZA', title:'Title1 Part 11'},
{id:'N9oRSrCC8_0', title:'Title1 Part 12'},
{id:'2KeakcqSp1I', title:'Title1 Part 13'},
{id:'o4v-GWm7nQQ', title:'Title1 Part 14'},
{id:'BvLTQ9tJxMU', title:'Title1 Part 15'},
{id:'f8puiCEIx5Y', title:'Title1 Part 16'},
{id:'QN8sXocf6go', title:'Title1 Part 17'},
{id:'tqYPa8lKR54', title:'Title1 Part 18'}
],
Title2: [
{id:'PdiLp4Is_Bo', title:'Title2 Part  1'},
{id:'AryzTAYL_EE', title:'Title2 Part  2'},
{id:'CvXcPCKIpQc', title:'Title2 Part  3'},
{id:'kxzARHPp4TM', title:'Title2 Part  4'},
{id:'sbN3eNpDNHA', title:'Title2 Part  5'},
{id:'v8rd-llQnKA', title:'Title2 Part  6'},
{id:'rRLi0q7mfPs', title:'Title2 Part  7'},
{id:'YT_-8_xMtZo', title:'Title2 Part  8'},
{id:'YynlBHnm1-Q', title:'Title2 Part  9'},
{id:'6alBJVmEtIw', title:'Title2 Part 10'},
{id:'45ZUqgL4P4I', title:'Title2 Part 11'},
{id:'PaQdlquAbp8', title:'Title2 Part 12'},
{id:'bfGSq5gWx10', title:'Title2 Part 13'},
{id:'oZdQzcy54n8', title:'Title2 Part 14'},
{id:'Q4-j5zQLr2A', title:'Title2 Part 15'},
{id:'PzEdUMOBMRg', title:'Title2 Part 16'},
{id:'AhXBvK0x9fg', title:'Title2 Part 17'}
]
}

function getObject(ytID) {
  return "<object width='420' height='345'>"+
                 "<param name='movie' value='http://www.youtube.com/v/"+ytID+
                 "?&autoplay=1&rel=0&version=3&amp;hl=en_US\'></param>"+
                 "<param name='allowFullScreen' value='true'></param>"+
                 "<param name='allowscriptaccess' value='always'></param>"+
                 "<embed src='http://www.youtube.com/v/"+ytID+
                 "?&autoplay=1&rel=0&version=3&amp;hl=en_US' type='application/x-shockwave-flash' "+
                 "width='420' height='345' allowscriptaccess='always' allowfullscreen='true'></embed></object>";

}
function getLinks(index,which) {
  var links = "";
  var parms = YouTubeVideos[index];
  $.each(parms,function(i) {
    if (i===which) links+='<b>'+(i+1)+'</b>&nbsp;'
    else links += '<a href="#" title="'+index+'" id="'+i+'">'+(i+1)+'</a>&nbsp;'
  });
  return links
}
 
$(document).ready(function() {
  $('div#wrap-around-alist').append('<div id="dialogPopup"></div>');
  $('#dialogPopup').dialog({
  	width: 422,
    height: 400,
    modal:true,
    autoOpen: false,
    resizable:false
  });
  var dia = $('#dialogPopup');

  $('#wrap-around-alist a').live('click', function(e) { // create the first video plus the link to the rest
        e.preventDefault();
        var obj = $(this);
        var index = $(this).attr('title');
        var parms = YouTubeVideos[index];
        var title = parms[0].title        
        dia.html(getObject(parms[0].id)+"<br />"+getLinks(index,0));     
        dia.dialog({title: title});
        dia.dialog('open');
  });
});
</script>

<div id="wrap-around-alist">

<img src=//i3.ytimg.com/vi/zDdiJTohGFg/default.jpg width=50 align="absmiddle" style="padding:5px" /><a href="#" title="Title1">YouTube Clip 1</a> &nbsp; 18 Parts &nbsp;&nbsp;<img src="/images/videoicon.gif" /><br />

<img src=//i1.ytimg.com/vi/PdiLp4Is_Bo/default.jpg width=50 align="absmiddle" style="padding:5px" /><a href="#" title="Title2">YouTube Clip 2</a> &nbsp; 17 Parts &nbsp;&nbsp;<img src="/images/videoicon.gif" /><br />

</div>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I took the liberty to format your code using the [ code  ] tag

I have the code here

http://jsfiddle.net/mplungjan/Qma3B/


I will investigate
0
 
Michel PlungjanIT ExpertCommented:
When you click on the link inside #wrap-around-alist or #dialogPopup
the thing under the image will be the alt tag of what you clicked

So first time

<a id="zDdiJTohGFg" title="Title1 Part 1 1" href="#">1</a>
<a id="zygoonUyWsM" title="Title1 Part 2" href="#">2</a>
<a id="mAayWztl0CM" title="Title1 Part 3" href="#">3</a>
<a id="U_xHhWh6p4I" title="Title1 Part 4" href="#">4</a>
<a id="0hccubRSfNM" title="Title1 Part 5" href="#">5</a>
<a id="2xwjRHU_OOI" title="Title1 Part 6" href="#">6</a>
<a id="jt4QTPkcpA4" title="Title1 Part 7" href="#">7</a>
<a id="8hdD7Lh83NU" title="Title1 Part 8" href="#">8</a>
<a id="kFIpjXXcnpo" title="Title1 Part 9" href="#">9</a>
<a id="mb7k9UCzcCQ" title="Title1 Part 10" href="#">10</a>
<a id="-toRhiqV8ZA" title="Title1 Part 11" href="#">11</a>
<a id="N9oRSrCC8_0" title="Title1 Part 12" href="#">12</a>
<a id="2KeakcqSp1I" title="Title1 Part 13" href="#">13</a>
<a id="o4v-GWm7nQQ" title="Title1 Part 14" href="#">14</a>
<a id="BvLTQ9tJxMU" title="Title1 Part 15" href="#">15</a>
<a id="f8puiCEIx5Y" title="Title1 Part 16" href="#">16</a>
<a id="QN8sXocf6go" title="Title1 Part 17" href="#">17</a>
<a id="tqYPa8lKR54" title="Title1 Part 18" href="#">18</a>

Open in new window


but those links do NOT have any alt. If you are determined to code it like this, and I strongly suggest you do NOT, then you need

<a id="zDdiJTohGFg" alt="1 <a href=.... title=...> .... 18</a>" title="Title1 Part 1 1" href="#">1</a>
<a id="zygoonUyWsM" alt="<a href=... > 2 <a href=...>... 18</a>" title="Title1 Part 2" href="#">2</a>

Open in new window


Instead create a java object notation  var and have the titles store there. Then you can simply index your way into that

var clips = {
  clip1: [
    { id="zDdiJTohGFg", title: "part1 of 18"},
    { id="zDdiJTohGFg", title: "part2 of 18"},
    { id="zDdiJTohGFg", title: "part3 of 18"},
   
.
.
.   ]
  }.
  clip2: [



0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
aline0508Author Commented:
Hi mplungjan,

Thank you for your suggestion but I am sure how to implement it.  Can you explain more please?

At the same time, I was thinking separating the clicks like this but it's not working either:

$('#wrap-around-alist a').live('click', function(e) {
        e.preventDefault();      
        dia.html("<object width='420' height='345'>"+
                 "<param name='movie' value='http://www.youtube.com/v/"+$(this).attr('id')+
                 "?&autoplay=1&rel=0&version=3&amp;hl=en_US\'></param>"+
                 "<param name='allowFullScreen' value='true'></param>"+
                 "<param name='allowscriptaccess' value='always'></param>"+
                 "<embed src='http://www.youtube.com/v/"+$(this).attr('id')+
                 "?&autoplay=1&rel=0&version=3&amp;hl=en_US' type='application/x-shockwave-flash' "+
                 "width='420' height='345' allowscriptaccess='always' allowfullscreen='true'></embed></object><br />"+$(this).attr('alt'));    
        dia.dialog({title: $(this).attr('title')});
        dia.dialog('open');
    });

    $('#dialogPopup a').live('click', function() {                        
            dia.html("<object width='420' height='345'>"+
                     "<param name='movie' value='http://www.youtube.com/v/"+$(this).attr('id')+
                     "?&autoplay=1&rel=0&version=3&amp;hl=en_US\'></param>"+
                     "<param name='allowFullScreen' value='true'></param>"+
                     "<param name='allowscriptaccess' value='always'></param>"+
                     "<embed src='http://www.youtube.com/v/"+$(this).attr('id')+
                     "?&autoplay=1&rel=0&version=3&amp;hl=en_US' type='application/x-shockwave-flash' "+
                     "width='420' height='345' allowscriptaccess='always' allowfullscreen='true'></embed></object><br />"+$(this).parent('#wrap-around-alist > a').attr('alt'));  
            dia.dialog({title: $(this).attr('title')});
            dia.dialog('open');
           
    });

Why can't I use $(this).parent() or something like that to go back to the parent element?

Thanks.
0
 
Michel PlungjanIT ExpertCommented:
I'll look later
0
 
Michel PlungjanIT ExpertCommented:
I am investigating this.

I think the whole thing needs to be redesigned.

I currently need to think about how to generate the link, because they need to be generated by the script and not contained in the alt tag.

Here is a beginning, but it is not correct - I will look during the next couple of days but right now I will post what I have
<script type="text/javascript">
var YouTubeVideos = {
  Title1: [
    {part:18, id:"tqYPa8lKR54"},
    {part:17, id:"QN8sXocf6go"},
...
    {part:1, id:"zDdiJTohGFg"}
  ],
  Title2: [
    { part:17, id:"AhXBvK0x9fg"},
...
    {part:1,   id:"...."}
}
 
$(document).ready(function() {
	$('div#wrap-around-alist').append('<div id="dialogPopup"></div>');
  $('#dialogPopup').dialog({
  	width: 422,
    height: 400,
    modal:true,
    autoOpen: false,
    resizable:false
  });
  var dia = $('#dialogPopup');

  $('#wrap-around-alist a').live('click', function(e) {
        e.preventDefault();
        var obj = $(this);
        var index = $(this).attr('title');
        var parms = YouTubeVideos[index];
        var title = index + parms[x].part        
        dia.html("<object width='420' height='345'>"+
                 "<param name='movie' value='http://www.youtube.com/v/"+parms[x].id+
                 "?&autoplay=1&rel=0&version=3&amp;hl=en_US\'></param>"+
                 "<param name='allowFullScreen' value='true'></param>"+
                 "<param name='allowscriptaccess' value='always'></param>"+
                 "<embed src='http://www.youtube.com/v/"+parms[x].id+
                 "?&autoplay=1&rel=0&version=3&amp;hl=en_US' type='application/x-shockwave-flash' "+
                 "width='420' height='345' allowscriptaccess='always' allowfullscreen='true'></embed></object><br />"+;     
        dia.dialog({title: title});
        dia.dialog('open');
    });

});

Open in new window

0
 
aline0508Author Commented:
Thank you, mplungjan.  It works.
0
 
Michel PlungjanIT ExpertCommented:
Ah - you managed to add the second onclick function?
0
 
aline0508Author Commented:
Yeah, thank you again, mplungjan.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.