views:

279

answers:

2

I've got a few demo videos I've been making as tutorials, and I'm using a link to open a dialog box and put the demo video in that box.

I use the same div to show other notes on the page when a user selects to view a complete note.

The code I use to show the notes is

    jQuery('span.Notes').live('click', function(){
var note=jQuery(this).data('note');

    jQuery('div#showNote').text(note);
       jQuery('div#showNote').append('
'); jQuery('div#showNote').dialog({ modal: true, close: function(){ jQuery('div#showNote').dialog('destroy').empty(); } }); });

The code I use for the demo videos is VERY similar.

 jQuery('a.demoVid').click(function(){
         var videoUrl=jQuery(this).attr('href');
       jQuery('div#showNote').dialog({
       modal: true,
    height: 400,
    width: 480,
    close: function(){
    jQuery('div#showNote').dialog('destroy').empty();
    }
    });
    swfobject.embedSWF(videoUrl,'showNote','480','390','8.0.0');
 return false;
 });

I can click on as many notes as I want, and the dialog opens up and shows the note. However, when I click the demoVid, the dialog opens, but then closing the dialog kills any other 'showNote' dialogs on the page, so I can't open any more notes, or demo videos.

+1  A: 

You're dialog is targetting div#showNote, and element IDs must be unique in the document. You should change it so it creates a new div for each dialog instance, something like the following (untested):

jQuery( $('<div class="note">') ).dialog({ ... 
   close: function() {
     $(this).dialog('destroy').empty();
   }
});
Tom
I'm not sure I understand exactly, or we may be misunderstanding each other. There is only one div#showNote on the page. I put the note in the same div as I put the result of the demoVid. The two can never be open at the same time anyway, so rather than adding another div to the page, I am using a div that is already there.
pedalpete
Ok, yes I misunderstood what you meant by "kills any other showNote dialogs", you mean it stops them opening from that point on, not closes the open ones.
Tom
+1  A: 

My second guess is that the call to swfobject.embedSWF is trampling on the div#showNote in some way that confuses jQuery. I'd try putting the video in a div inside the dialog, either:

jQuery('div#showNote').append('<div id="showVideo"></div>').dialog({ ... });
swfobject.embedSWF(videoUrl,'showVideo','480','390','8.0.0');
Tom
Thanks Tom, you were absolutely right, swfobject was trampling something. Thanks.
pedalpete