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

[Rick Faircloth]

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>