[jQuery] Re: inline delete ajax function/confirm dialog

[Meroe]

Richard,

A similar question was asked not to long ago.  Here is the reply (not from
me).  If I recall correctly this resolved the issue.


Hi,

"id" is designed to work with only 1 instance in a web page.
If you need multiple instances of an element, use class="newsTrigger"
instead of id="newsTrigger".
And change $('#newsTrigger') into $('.newsTrigger').

Regards,
Irwan Setiawan

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