Bootstrap dialog confirmation onclick confirmation event

问题:

I am trying to write my own method that calls the BootstrapDialog and creates a confirmation popup. If the user selects "confirm" then the method will return true and continue to call the jsf action. The code I have so far:

 /**  * Confirm window  *  * @param {type} message  * @param {type} callback  * @returns {undefined}  */ BootstrapDialog.confirmation = function(title, message) {      var callback = function(result) {         console.log(result);         return result;     };      var b = new BootstrapDialog({         title: title,         message: message,         closable: false,         data: {             'callback': callback         },         buttons: [{                 label: 'Cancel',                 action: function(dialog) {                     typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);                     dialog.close();                 }             }, {                 label: 'Continue',                 cssClass: 'btn-primary',                 action: function(dialog) {                     typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);                     dialog.close();                 }             }]     }).open();       return callback;   };

I am calling the js like so:

<h:commandButton type="button" value="Exit" action="myaction" styleClass="btn btn-default" onclick="return BootstrapDialog.confirmation('Data unsaved', 'Are you sure you want to continue');"/>

The dialog pops up just fine, the issue is that it is not returning true / false. I have modeled my js after this example: http://nakupanda.github.io/bootstrap3-dialog/

回答1:

I don't think you really want to extend BootstrapDialog. And I wouldn't be expecting the dialog to return anything, since it's going to be operating asynchronously (it has to wait for the user to act by pressing a button.) So you need to interact with it through its callbacks.

I'm not familiar with bootstrap3-dialog beyond what I just saw skimming its Github page so it may offer you additional callbacks or events to do this more neatly. But I think this will accomplish roughly what you're after:

function letUserExit() {     // Add code here to redirect user where she expects to go      // when pressing exit button or to submit a form or whatever. }  var exitConfirmDialog = new BootstrapDialog({     title: 'Data unsaved',     message: 'Are you sure you want to continue?',     closable: false,     buttons: [         {             label: 'Cancel',             action: function(dialog) {                 dialog.close();             }         },         {             label: 'Continue',             cssClass: 'btn-primary',             action: function(dialog) {                 letUserExit();             }         }     ] });  // Add event to invoke dialog to your exit button here $('button.exit').on('click', function() {     // Show or open? Not quite sure what difference is. Use the one     // that's most appropriate.     exitConfirmDialog.show();      // Stop any events (like a form being submitted or user being     // redirected.) Need to wait until user responds to modal and     // have event take place then.     return false; });

回答2:

I am new with Bootstrap and discovered bootstrap-dialog only two hours ago, so my answer is only worth what it's worth... (french saying, how does it translate in english ? ?)

I quickly ran in a similar problem : how to use a nice bootstrap confirm to replace the ugly javascript confirm API on submit button click?...

As KLenwel said, confirm is a synchronous API, bootstrap-dialog is an asyncronous one. Your thread just doesn't wait for the user answer to post back (or not.)

I used a secondary button to popup the confirm dialog. The real submit button being hidden. The Bootstrap-dialog confirm fires the click of the submit button, preserving both the javascript submit handler and the http header sent to the server.

This code example is an extract of a ASP.Net Webform page, using databinding to give a unique css class name to the invisible button so it can easily be triggered by the javascript dialog callback. I did use the CssClass property, not use the id property. This is only for ASP.Net reasons.

<asp:Button style="display: none" runat="server" CssClass='<%# Eval( "Id" ) %>' OnCommand="Delete" CommandName='<%# Eval( "Id" ) %>' /> <input type="button" class="btn btn-danger" value="Delete" onclick="BootstrapDialog.confirm('Delete?', function(ok) {if(ok) $('.<%# Eval( "Id" ) %>').click(); } )" />

The same thing, in pure HTML, ASP.Net WebForms independant (uses the control's id) :

<input type="submit" style="display: none" id="TheSubmitButton" onclick="alert('ok, submit will be fired');" /> <input type="button" title="Delete" data-placement="bottom" class="btn btn-danger" value="Delete" onclick="BootstrapDialog.confirm('Delete?', function(ok) {if(ok) $('#TheSubmitButton').click(); } )" />

回答3:

i had the same question, but i solved using eval(). The function is

function showConfirmBootstrap(type,title,mesagge, myFunction){      BootstrapDialog.confirm({         size: "size-small",         type: "type-"+type,          title: title,         message: mesagge,         cssClass: 'delete-row-dialog',         closable: true,         callback: function(result) {             if(result) { eval(myFunction); }         }     }); }

When the result is true, the app will do myFunction. How you are seeing, myFunction is a parameter in the main function.

You may send the type bootstrap, title and message as parameters.

An example is:

showConfirmBootstrap("danger","Error","Do you want do this function?", "alert(5)")

转载请标明出处:Bootstrap dialog confirmation onclick confirmation event

文章来源: Bootstrap dialog confirmation onclick confirmation event