BB Dialog showing up before alert

Question

JSFiddle Link:

The bootbox.alert should show up before the bootbox.dialog. I've preloaded all the libraries into the JSFiddle. I want the bootbox.dialog to show up once the bootbox.alert has been clicked on.

Answer 1

Check it out here

Bootbox defined their functions here, and as you can see they include a callback. For example:

bootbox.alert(message, callback)

The callback gives you the option to only run certain code once this line is completed. This solves your problem.

JS

$(document).ready(function () {
    $('.begin-game').click(function () {
        bootbox.alert("This should show up first", function () {
            bootbox.dialog({
                message: "Did you pass Go?",
                title: "This should go second / last",
                buttons: {
                    // Passed go
                    success: {
                        label: "Yes I Passed GO!",
                        className: "btn-success",
                        callback: function () {

                        }
                    },
                    // Did not pass go
                    danger: {
                        label: "I did not :(",
                        className: "btn-danger",
                        callback: function () {

                        }
                    },
                }
            });
        });
    });
});

Answer 2

The 2nd parameter to bootbox.alert is a function that will be called after the alert is dismissed. Launch the dialog in that function.

$(document).ready(function() {
    $('.begin-game').click(function () {
        bootbox.alert("This should show up first", showDialog);

        function showDialog() {
            bootbox.dialog({
                message: "Did you pass Go?",
                title: "This should go second / last",
                buttons: {
                    // Passed go
                    success: {
                        label: "Yes I Passed GO!",
                        className: "btn-success",
                        callback: function() {

                        }
                    },
                    // Did not pass go
                    danger: {
                        label: "I did not :(",
                        className: "btn-danger",
                        callback: function() {

                        }
                    }
                }
            });        
        }
    });
});