Bootbox confirm: return client result in order to

问题:

Before bootbox, I did this on aspx file in gridview;

<asp:Button ID="btnDelete" CssClass="btn btn-danger" OnClientClick="if(!confirmDelete()) return false;" runat="server" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" CausesValidation="false" CommandName="DeleteRow" Text="Delete"/>

and on js file;

function confirmDelete() {
return confirm("Are you sure you want to delete the record?"); }

And with confirmation, the gridview's RowCommand is triggered and the deletion is done.

With bootbox, I am realy stuck. I know bootbox is asynchronus and try to use 'preventDefault', but it didn't work. So how can I convert the above js file to bootbox version? Thanks in advance.

回答1:

I finally come up with this solution;

function confirmDelete(sender) {
    if ($(sender).attr("confirmed") == "true") {return true;}

    bootbox.confirm("Are you sure you want to delete?", function (confirmed) {
        if (confirmed) {
            $(sender).attr("confirmed", confirmed).trigger("click");
        }
    });

return false;
}

And changing button's OnClientClick;

OnClientClick="return confirmDelete(this);"

回答2:

I've tried Fatih Bilginer solution, but it requires another click to do postback, so I changed .trigger("click") for sender.click();

EDIT

function confirmDelete(sender) {
    if ($(sender).attr("confirmed") == "true") {return true;}

    bootbox.confirm("Are you sure you want to delete?", function (confirmed) {
        if (confirmed) {
            $(sender).attr('confirmed', confirmed);
            sender.click();
        }
    });

return false;
}

回答3:

I've doing a some change in dannyzar code, I used callback: to call function

and I've added some design to bootbox modal

function confirmDelete(sender) {
          if ($(sender).attr("confirmed") == "true") { return true; }

          bootbox.confirm({
          message: "Are you sure you want to delete?",
          buttons: {
              confirm: {
                  label: 'Yes',
                  className: 'btn btn-success'
              },
              cancel: {
                  label: 'No',
                  className: 'btn btn-danger'
              }
          }
          ,callback: function (confirmed) {
              if (confirmed) {
                  $(sender).attr('confirmed', confirmed);
                  sender.click();
              }
          }});

          return false;
      }