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
-~----------~----~----~----~------~----~------~--~---
