Hi Rick,
Thanks for your reply. I tried using the .live function but it hasn't
solved the problem. When I click a delete icon the first time it
changes the tr bg colour then opens the dialog, if I cancel it it
resets the tr colour then closes the dialog.
>From then, when I click on a delete icon it changes the tr bg colour
but does not open the dialog.
If live re-applies the click functionality to new DOM element i guess
it would have no effect as I'm not adding new DOM element just
removing them.
Kind regards, Richard
On 28 Aug, 02:46, "Rick Faircloth" <r...@whitestonemedia.com> wrote:
> Sounds like a job for the .live function...
>
> Try this in place of your first line of code below:
>
> $(".delete_icon").live('click', function() {
>
> That basically "reapplies" the click functionality to
> any new .delete_icon elements added to the DOM by your ajax function.
>
> Rick
>
>
>
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> Behalf Of Richard
> Sent: Thursday, August 27, 2009 2:18 PM
> To: jQuery (English)
> Subject: [jQuery] inline delete ajax function/confirm dialog
>
> Hi all,
>
> I have an inline delete icon on a table of a query, when the delete
> button is clicked, i have a dialog popup to confirm the action i then
> issue an ajax call to delete the user from the database and then
> remove the tr from the table. it all works fine until the dialog is
> closed. either through the delete ajax function or the cancel function
> of the dialog. The dialog will then not open if any of the delete
> icons are clicked in the table until a page refresh.
>
> I hope someone can help as this is driving me crazy.
>
> Here's my code
>
> $(".delete_icon").click(function() {
>
> var thisRow = $(this).parents("tr");
> var userID = $(this).attr("id");
>
> $(thisRow).css({ "background-color" : "#fbcdcd" },
> 'fast');
>
> $("#confirmDeleteStaff").dialog({
> bgiframe: true,
> resizable: false,
> height:160,
> width:300,
> modal: true,
> overlay: {
> backgroundColor: '#000',
> opacity: 0.5
> },
> buttons: {
> 'Delete Staff Member': function() {
> $(this).dialog('close');
>
> $.get("/admin/delete_staff.cfm", { id: userID } );
> // And we make the deleted
> row to dissapear! //
> $(thisRow).fadeOut("fast");
> },
> Cancel: function() {
> $(thisRow).css({
> "background-color" : "#fff" }, 'fast');
> $(this).dialog('close');
>
> }
> }
> });
>
> });
>
> and the div for the dialog
>
> <div class='hidden'>
> <div id="confirmDeleteStaff" title="Delete Staff Member?">
> <p><span class="ui-icon ui-icon-alert" style="float:left;
> margin:0 7px 20px 0;"></span>This Staff Member will be permanently
> deleted. Are you sure?</p>
> </div>
> </div>
