Updated 28OCT08: Changed code to use a single confirmation instead of one in each row of the table.

Updated 12SEP08: Demo no longer throws error after deleting row. Oops :(

I have been using the ModalPopupExtender from the AjaxControlToolkit for quite some time now to confirm delete requests prior to allowing the page to be posted back to the server. Since I have been spending so much time with jQuery lately I thought I would try to put something together that was jQuery specific.

Demo | Download

I started with the idea to port as much as I could from Matt's post that was specific to Dynamic Data. I had some issues with using the ThickBox Plugin and its callbacks that from what I know now could probably go back and make work. In the process of figuring things out though I came across the SimpleModal Plugin from Eric Martin which works fine for what I am trying to do. Matt used a clever technique that made my job a lot easier. When you click the image, all you are really doing is popping up the dialog. You aren't issuing the delete command until you click yes in the dialog. This is done by hitting the click event of a hidden button that contains the delete command. Check out the pictures and code below for a better idea. Be sure to checkout the demo if you missed it above.

ListView:

Confirmation Dialog:

jQuery Involved:

        $(".deleteRow").each(function() {
            var btn = $(this).find(".deleteCommand");
            
            $(this).find(".deleteButton").click(function(e) {
                e.preventDefault();
                var msg = $(this).attr("title")

                confirm("Are you sure you want to " + msg + "?", function() {
                    deleteRow(btn);
                });
            });
        });
    });

    function deleteRow(args) {
        $(args).click();
        alert("The row would of been deleted.");
        return false;
    }

    function confirm(message, callback) {
        $('#confirm').modal({
            close:false, 
            overlayId:'confirmModalOverlay',
            containerId:'confirmModalContainer', 
            onShow: function (dialog) {
                dialog.data.find('.message').append(message);

                // if the user clicks "yes"
                dialog.data.find('.yes').click(function () {
                    // call the callback
                    if ($.isFunction(callback)) {
                        callback.apply();
                    }
                    // close the dialog
                    $.modal.close();
                });
            }
        });
     }

HTML For Delete TD:

<td class="deleteRow"> 
    <asp:ImageButton ID="ImageButtonDelete" runat="server" ImageUrl="~/_assets/img/delete.png" CssClass="deleteButton"
        ToolTip='<%# "delete " + Eval("contactname")  %>' />           
        
        <!-- Hidden command button that actually issues the delete -->
        <asp:Button ID="deleteCommand" runat="server" 
            CausesValidation="false" 
            CommandName="Delete" CssClass="deleteCommand" 
            style="display:none" 
        />
        
        <div id='confirm' style='display:none'>
            <a href='#' title='Close' class='modalCloseX modalClose'>x</a>
            <div class='header'><span>Confirm</span></div>
            <p class='message'></p>
            <div class='buttons'>
            <div class='no modalClose'>No</div><div class='yes'>Yes</div>
        </div>
</td>

Note: If you looking for good examples of how to do this with the ModalPopupExtender I recommend taking a look at these posts by Matt Berseth http://mattberseth2.com/demo/Default.aspx?Filter=ModalPopup