Wait for Bootbox Confirm to Run Ajax

Question

I need to run an ajax function after confirm is pressed on a bootbox confirm modal. The modal flashes briefly, then the php code is run without waiting. How do I make it wait.

My Javascript runs when I remove the bootbox but I want to confirm before it's run

My code is,

$('#change_pass_form').submit(function () {
    bootbox.confirm({
        message: "Your password is about to be changed. Are you sure?",
        buttons: {
            cancel: {label: '<i class="fa fa-times"></i> Cancel'},
            confirm: {label: '<i class="fa fa-check"></i> Confirm'}
        },
        callback: function (result) {
            if (result === 'true') {
                $.ajax({
                    type: 'POST',
                    url: 'php_files/profile_php_files/profile_password_change_process.php',
                    data: {
                        user_id: sessionStorage.getItem('user_id'),
                        new_password: $('#new_password').val(),
                        repeat_password: $('#repeat_password').val()
                    },
                    success: function (data) {
                        if (data === 'correct') {
                            bootbox.alert({
                                size: 'small',
                                message: 'Your password has been changed. You will now be logged out.',
                                callback: function () {
                                    window.location.replace('index.html');
                                }
                            });
                            return true;
                        } else {
                            bootbox.alert({
                                size: 'small',
                                message: data
                            });
                            return false;
                        }
                    }
                });
            } else {
                return false;
            }
        }
    });
}); 

Answer 1

All of the return false and return true are returning to callbacks and not to the outer submit handler function. Also, they occur only after asynchronous events so the default submit process is never prevented.

Just prevent the default browser submit

$('#change_pass_form').submit(function (event) {
    event.preventDefault();