4

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/

mahemoff
  • 44,526
  • 36
  • 160
  • 222
Sixthpoint
  • 1,161
  • 3
  • 11
  • 34

3 Answers3

2

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;
});
klenwell
  • 6,978
  • 4
  • 45
  • 84
  • This would still pose a problem in the case of waiting for a confirmation since that would require a synchronous task. I am trying to get this function like the javascript confirm message – Sixthpoint Aug 04 '14 at 17:40
  • @Sixthpoint I don't understand what you mean by "case of waiting for a confirmation since that would require a synchronous task." This should function like a javascript confirm. – klenwell Aug 04 '14 at 18:07
  • so by adding a return true to letUserExit() it would work in the case of my onclick event for jsf? – Sixthpoint Aug 04 '14 at 18:34
  • Javascript's `confirm` halts the browser until user acts. That's why it is able to be treated synchronously. Bootstrap's dialogue is not designed to operate that way. User will still be able to click on other parts of page when dialog appears, for instance, which he can't do with native confirm dialogue. The question is what do you want to happen when the user hits continue and confirms intent. Redirect to another page? Submit a form? That's what you put in `letUserExit` (or in Continue button callback directly). – klenwell Aug 04 '14 at 19:03
  • One additional note: you may need to have your exit button click callback return false so that any event, like a submitting a form, doesn't propagate. (I'll update my code.) Any event you want to have occur after user confirms needs to be put inside the Continue callback. Button itself should really just open the bootstrap modal. – klenwell Aug 04 '14 at 19:07
0

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(); } )" />
Rikou
  • 281
  • 3
  • 9
0

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)")
David Medina
  • 1