[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jQuery Dialog

Posted on 2011-10-04
9
Medium Priority
?
417 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:aline0508
  • 6
  • 3
9 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36916234
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36916335
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
 

Author Comment

by:aline0508
ID: 36922529
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36922559
I'll look later
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36924672
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 36925863
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
 

Author Comment

by:aline0508
ID: 36934309
Thank you, mplungjan.  It works.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36934938
Ah - you managed to add the second onclick function?
0
 

Author Comment

by:aline0508
ID: 36935006
Yeah, thank you again, mplungjan.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…
Suggested Courses

830 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