Dialogs are always moved to the end of the body to fix a z-index bug in IE. You need to cache a reference to the dialog element on creation and use that reference to open the dialog instead of traversing the DOM to find it.
On Apr 24, 4:41 am, Michael <[email protected]> wrote: > Hello all, > > I have a problem I can't solve whith the use of the Dialog script > coupled with some AJAX. > > I fill my webpage with an AJAX query, and for each elements I fill the > page with, I have the following HTML code: > > <div class="comiteeIcons"> > <a href="{ComiteeLine.URL_SHOW_MEMBERS}"><img src="../images/ > users.gif" alt="Modifier les membres" title="Modifier les membres" /></ > a> > <img src="../images/delete.png" class="deleteIcon" alt="Supprimer : > {ComiteeLine.COMITEE_NAME}" title="Supprimer : > {ComiteeLine.COMITEE_NAME}" /> > <div class="deleteBox" id="deleteComitee_{ComiteeLine.COMITEE_ID}" > title='Confirmation de suppression'>Supprimer : > {ComiteeLine.COMITEE_NAME}</div> > </div> > > I want that when I click on the image with the deleteIcon class, a > modal dialog box (defined in the class deleteBox) shows to display a > confirmation. > > As I use AJAX, I put the JS initialization code inside a live query > function, giving to me that code: > > $(function() { > $('.deleteBox').livequery(function() { > $(this).dialog({ > bgiframe: true, > resizable: false, > height:140, > modal: true, > draggable: false, > autoOpen: false, > overlay: { > backgroundColor: '#000', > opacity: 0.5 > }, > buttons: { > 'Supprimer': function() { > $(this).dialog('close'); > > if (initForComitees) > > deleteComitee($(this).attr("id")); > else > deleteComiteeMember(); > }, > 'Annuler': function() { > $(this).dialog('close'); > } > } > }); > }); > > $('.deleteIcon').livequery('click', function(event) { > $(this).parent().children('.deleteBox').dialog('open'); > return false; > }); > > }); > > The problem I have is that when the AJAX query is over, the <div> > corresponding to the dialog boxes have disappeared! > > So the click event fails because it can't find the correct id of the > box. > > I found a solution by recreating the whole dialog in the click event > with something like that: > > $(".deleteIcon").click(function() { > > var id = $(this).attr("id"); > > $("<div title='Confirmation de suppression'>" + $(this).attr > ("title") + "</div>").dialog({ > bgiframe: true, > resizable: false, > height:140, > modal: true, > draggable: false, > autoOpen: false, > overlay: { > backgroundColor: '#000', > opacity: 0.5 > }, > buttons: { > 'Supprimer': function() { > $(this).dialog('close'); > > if (initForComitees) > deleteComitee(id); > else > deleteComiteeMember(); > }, > 'Annuler': function() { > $(this).dialog('close'); > } > } > }).dialog('open'); > > }); > > But as I will have to display some other boxes, that won't be an easy > solution. > > Is there something I'm doing wrong? > > Thanks in advance > > Michael --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
