Using bootbox the show event is not fired

Question

I'm not able to catch the show event for the bootbox.confirm dialog in order to do some css adjustments to the dialog before showing it.

I tried things like the followings but didn't succeed:

$(document).on("show.bs.modal", function (event) {...});
$(document).on("show", function (event) {...});
$(document).on("show", ".bootbox", function (event) {...});

score 43 · Answer 1 · answered Apr 23 '14 at 07:23

43

This should work for you using Bootbox 4.x.x and Bootstrap 3.x.x:

var box = bootbox.dialog({
  message: '',
  title: '',
  buttons: {},
  show: false
});

box.on("shown.bs.modal", function() {
  alert('it worked!');
});

box.modal('show');

or like this:

$(document).on("shown.bs.modal", function (event) {...});

answered Apr 23 '14 at 07:23

codephobia

1,580
2
17
42

2

I'm not sure why the current "correct" answer is chosen. This **shown.bs.modal** worked for me - whereas the **show.bs.modal** did not – Andrew Newby Aug 27 '14 at 15:52
3

I found that the show.bs.modal event doesn't work when you haven't set 'show' option on the dialog, or set it to true. The dialog is automatically shown then, therefore the even isn't fired. If set the show option to false, as in this example, and show the modal manually with `box.modal('show')`, then the show.bs.modal event is fired as well. – rolandow Apr 23 '15 at 13:01
This worked for me: bootbox.dialog({ message: '', title: '', buttons: {}, show: false }).one("shown.bs.modal", function() { alert('it worked!'); }); – SC00PB Aug 16 '18 at 20:11
This definetly solves the issue and should be accepted as answer – user698188 Aug 08 '19 at 12:31
Perefect, this works, accepted answer does not – Rippo Nov 21 '22 at 09:52

score 3 · Accepted Answer · answered Apr 23 '14 at 15:34

3

I would also prefer to use a global function like:

function bootbox_confirm(msg, callback_success, callback_cancel) {
    var d = bootbox.confirm({message:msg, show:false, callback:function(result) {
        if (result)
            callback_success();
        else if(typeof(callback_cancel) == 'function')
            callback_cancel();
    }});

    d.on("show.bs.modal", function() {
        //css afjustment for confirm dialogs
        alert("before show");
    });
    return d;
}

and call it this way:

bootbox_confirm("my message", function(){alert('ok')}, function(){alert('cancel')}).modal('show');

or when no logic for cancel:

bootbox_confirm("my message", function(){alert('ok')}).modal('show');

answered Apr 23 '14 at 15:34

alloyoussef

757
3
10
24

1

I wish people would comment on why they think an answer is bad instead of just downvoting, especially if the answer is accepted(meaning it worked for the asker). – Austin Schmidt Jun 24 '16 at 14:18
@AustinSchmidt I would think it is because he never specified that the answer needed to be in a global function. He took the answer that worked, and applied it to his own answer afterwards, and then marked it as correct. I don't really care about it personally (I wrote the highest upvoted answer), but I can see how others might take issue with that. – codephobia Jul 20 '16 at 22:51

score 2 · Answer 3 · answered Apr 21 '14 at 13:32

2

you can do like this:

var dialog = bootbox.dialog("foo", [], {show: false});

dialog.on("shown", function() {
 //
});

dialog.modal("show");

answered Apr 21 '14 at 13:32

Nayeem Mansoori

821
1
15
41

Using bootbox the show event is not fired

3 Answers3