CODEWITHSUNDEEP
javascripttwitter-bootstrapcallbackbootbox
Null Reference
Null Reference

Reputation: 11360

Bootbox: Callback function after dismissing the dialog / Clicking on the 'X' button

The following snippet allows me to perform stuff in a callback function for the buttons that are clicked. However, how can I get a callback function, or a similar workaround such that I can perform some code when a user clicks on the 'X' button/dismisses the dialog?

    bootbox.dialog({
        title: "Woah this acts like an alert",
        message: "Cool info for you. You MUST click Ok.",
        buttons: {
            sucess:{
                label: "Ok",
                callback: callback
            }
        }       
    });

   callback(){//stuff that happens when they click Ok.}

I do not want to disable/hide the close button with 

closeButton: false,

Upvotes: 12

Views: 37024

Answers (4)

nuander
nuander

Reputation: 1413

Sometimes I want to use the Confirm dialog to present 2 options where cancel is not one of them. So I want escape or X button to just dismiss the dialog. To do this I added an option called dismissOnClose. Then I modified bootbox.js

        dialog.on("click", ".bootbox-close-button", function (e) {
            // onEscape might be falsy but that's fine; the fact is
            // if the user has managed to click the close button we
            // have to close the dialog, callback or not
            // MG added option to dismiss dialog on close or esc without returning true or false
            if (typeof options.dismissOnClose === "undefined" || !options.dismissOnClose) {
                processCallback(e, dialog, callbacks.onEscape);
            } else {
                processCallback(e, dialog, null);
            }
        });

and

        dialog.on("escape.close.bb", function (e) {
            // the if statement looks redundant but it isn't; without it
            // if we *didn't* have an onEscape handler then processCallback
            // would automatically dismiss the dialog
            if (callbacks.onEscape) {
                // MG added option to dismiss dialog on close or esc without returning true or false
                if (typeof options.dismissOnClose === "undefined" || !options.dismissOnClose) {
                    processCallback(e, dialog, callbacks.onEscape);
                } else {
                    processCallback(e, dialog, null);
                }
            }
        });

Upvotes: 0

MackieeE
MackieeE

Reputation: 11872

Some people might see this as a bit of a hack-around. Although it suits me fine as all I wanted to acknowledge as a developer that someone accepted the message, which triggered the next event.

Using Bootbox.js' native confirm() method which does supply a callback action. I added an additional class as an option to the confirm button (which must be supplied on a confirm() call) with the hidden classname (E.g. Bootstap has a helper class for display:none called hidden.

This hides the confirm button, thus the Modal appears as a normal Alert box.

    bootbox.confirm({ 
        message: "Some Button Text", 
        buttons: {
            "cancel": {
                label: "<i class='fa fa-check'></i> OK - I understand",
                className: "btn btn-primary"
            },
            //Hide the required confirm button.
            "confirm": { label: "", className: "hidden" }
        },
        callback: function(){
            //Begin Callback
            alert( "Finished" );
        }
    });

JsFiddle Example

Upvotes: 1

Haris ur Rehman
Haris ur Rehman

Reputation: 2663

There is onEscape function for this.

bootbox.dialog({
    message: 'the msg',
    title: "Title",
    onEscape: function() {
        // you can do anything here you want when the user dismisses dialog
    }
});

Upvotes: 13

anpsmn
anpsmn

Reputation: 7257

You can use a variable to check if the modal was hidden after a click on OK or x button / escape key

var status = false;

$('.btn').on('click', function () {
    bootbox.dialog({
        title: "Woah this acts like an alert",
        message: "Cool info for you. You MUST click Ok.",
        buttons: {
            sucess: {
                label: "Ok",
                callback: function () {
                    status = true;
                }
            }
        },
        onEscape: function () {
            $('.bootbox.modal').modal('hide');
        }
    });
});

$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
    callback();
});


function callback() {
    if (!status) {
        onClose();
    } else {
        onOK();
        status = false;
    }
}

function onClose() {
    $('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}

function onOK() {
    $('p.alert span').removeClass().addClass('text-success').text("Sucess");
}

Fiddle demo

Upvotes: 7

Related Questions