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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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: [



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.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Michel PlungjanIT ExpertCommented:
I'll look later
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

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
aline0508Author Commented:
Thank you, mplungjan.  It works.
Michel PlungjanIT ExpertCommented:
Ah - you managed to add the second onclick function?
aline0508Author Commented:
Yeah, thank you again, mplungjan.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.