Question

I’ve got a jQuery dialog and an asp.net button (Delete). When the delete button is clicked I want the dialog to open a confirm window saying ‘Are you sure you want to delete this record?’. When the user clicks yes I’d like to resume the asp.net postback. Here’s my code so far:

   $("#dialog-delete").dialog({
        autoOpen: false,
        height: 200,
        width: 400,
        modal: true,
        resizable: false,
        buttons: {
            'Cancel': function () {
                $(this).dialog('close');
            },
            'Yes': function () {
                $(this).dialog('close');
                //__doPostBack('ctl00$cp1$btnDelete','');
            }
        },
        open: function () {
            $(":button:contains('Yes')").addClass("red");
        }
    });
     $("[id*=btnDelete]").live('click', function (e) {
        e.preventDefault();
        $("#dialog-delete").dialog('open');
     });

So I stop the postback with preventDefault the dialog opens and displays the message but I can’t get the delete to fire without hardcoding the delete button, which is nasty. Is there anyway I can hold up the click event whilst the dialog displays and call preventDefault on Cancel and resume on Yes?

Answer 1

You could change the live event type to mouseup instead of click and then use the click event to fire the postback.

$("[id*=btnDelete]").live('mouseup', function (e) { ...

...

$("[id*=btnDelete]").click();

Edit (based on comments)

Another thought, you could stick with the original idea of handling the click event and upon confirmation of the delete call the .die() function to remove the live event handler previously attached, enabling you to call .click() and causing a postback.

You can call the .die() function like so:

$("#dialog-delete").dialog({
    autoOpen: false,
    height: 200,
    width: 400,
    modal: true,
    resizable: false,
    buttons: {
        'Cancel': function () {
            $(this).dialog('close');
        },
        'Yes': function () {
            $(this).dialog('close');
            $("[id*=btnDelete]").die('click');
            $("[id*=btnDelete]").click();
        }
    },
    open: function () {
        $(":button:contains('Yes')").addClass("red");
    }
});

 $("[id*=btnDelete]").live('click', function (e) {
    e.preventDefault();
    $("#dialog-delete").dialog('open');
 });