javascriptjquerytwitter-bootstrapbootstrap-dialog

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/


Solution

  • 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;
    });