Using jquery-ui dialog as a confirm dialog with an ASP:LinkButton (how to invoke the postbck)

I'd like to use jQuery UI's dialog to implement a confirm dialog which is shown when the user clicks a delete-link (开发者_开发问答implemented using an asp:LinkButton).

I'm using code as shown below (copied from the jquery ui documentation):

<!-- the delete link -->
<asp:LinkButton ID="btnDelete" runat="server" Text="Delete"
  OnClick="btnDelete_Click" CssClass="btnDelete"></asp:LinkButton>

<!-- the confirm-dialog -->
<div id="dialog-confirm-delete" title="Delete?" style="display:none;">
  <p>Are you sure you want to permanently deleted the selected items?</p>
</div>

<script>
$(document).ready(function () {
    // setup the dialog
    $('#dialog-confirm-delete').dialog({
        autoOpen: false,
        modal: true,
        buttons: {
          "Delete all items": function () {
                 $(this).dialog("close");
                 // ===>>> how to invoke the default action here
              },
          Cancel: function () { $(this).dialog("close"); }
        }
    });

    // display the dialog
    $('.btnDelete').click(function () {
        $('#dialog-confirm-cancel').dialog('open');
        // return false to prevent the default action (postback)
        return false;
    });

});
</script>

So in the click event handler, I have to prevent the default action of the LinkButton (the postback) and instead display the dialog.

My question is: how can I then invoke the default action (the postback) of the delete link to perform the postback in case the user clicked the "Delete all items" button in the dialog?

OK, here's my approach (it works, but it might not be the best solution):

$(document).ready(function () {
  $('#dialog-confirm-cancel').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "Delete all items": function () {
        // invoke the href (postback) of the linkbutton,
        // that triggered the confirm-dialog
        eval($(this).dialog('option', 'onOk'));
        $(this).dialog("close");
      },
      Cancel: function () { $(this).dialog("close"); }
    }
  });

  $('.btnDelete').click(function () {
    $('#dialog-confirm-delete')
      // pass the value of the LinkButton's href to the dialog
      .dialog('option', 'onOk', $(this).attr('href'))
      .dialog('open');
    // prevent the default action, e.g., following a link
    return false;
  });
});

If you're not doing anything more than confirming you can add an attribute to the button.

<asp:LinkButton ID="btnDelete" runat="server" Text="Delete"
  OnClientClick="if(!confirm('Are you sure?'))return false;" CssClass="btnDelete"></asp:LinkButton>

If you look at the Project Awesome on Codeplex it has a generic implementation of a Confirm Dialog that you can inspect for your scope.

So you prevented the default action of the link(following the link), right? So adding location.replace('path/to/file'); after $(this).dialog('close'); would solve your problem.

Not sure I understood your question right though.

Try adding $("#yourformid").submit(); at this spot // ===>>> how to invoke the default action here. According to the docs: "... the default submit action on the form will be fired, so the form will be submitted."

Edit
You can try to do something like this:

$('.btnDelete').click(function (event, confirmed) {
    if (confirmed) {
        return true;
    } else {
        $('#dialog-confirm-cancel').dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    }
});

And then in your delete all items function:

"Delete all items": function () {
    $(this).dialog("close");
    $('.btnDelete').trigger("click", [true]);
},

$('#dialog-confirm-delete').dialog({
   autoOpen: false,
   modal: true,
   buttons: {
       Cancel: function() {
           $(this).dialog("close");
       },
       "Delete all items": function() {
           $(this).dialog("close");
           // ===>>> how to invoke the default action here
       }
   }
});

If you are using a LinkButton you can do this:

__doPostBack("<%= lnkMyButton.UniqueID %>", "");