How to get a value from Ajax call to be used in a Bootbox button's function?

Question

I am using Bootbox for my modals and I am having trouble in showing the form validation errors from an Ajax call to the modal. The callback function for the submit button on my modal calls the add_college function to submit the form via Ajax.

When there are validation errors, the modal is populated with validation errors. The problem is that the modal closes regardless if there are validation errors or not. I want the modal to not close only when there are no validation errors.

I know I can just return false in the callback function on my button when there are validation errors to not close it but I have no way of knowing if there are validation errors since I cannot return a value in the Ajax call since it is asynchronous. What is the proper way of doing it?

Here is my code:

$('#new-college-btn').click(function () {
    bootbox.dialog({
        title: "New College",
        message: 
            ''// <Insert long HTML form here>
            ,
        buttons: {
            add: {
                label: "Add",
                className: "btn btn-primary",
                callback: function () {
                    var form_data = {
                        college_name: $('#college-name').val(),
                        college_initials: $('#college-initials').val(),
                        username: $('#username').val(),
                        password: $('#password').val(),
                        confirmation_password: $('#confirmation-password').val()
                    };
                    add_college(form_data);
                }
            },
            cancel: {
                label: "Cancel",
                className: "btn btn-default"
            }
        }
    }); // end bootbox dialog       
});


function add_college(form_data) {
    console.log(form_data);
    $.ajax({
        url: 'admin/add_new_college',
        type: 'POST',
        data: form_data,
        dataType: 'JSON',
        success: function (response)
        {
            if (response.error) { // there are form validation errors
                // populate modal with validation errors here
            } else {
                // other data processing here
                Result.success('College Successfully Added!');
            }
        },
        error: function () {
            console.log("fail");
        }
    });
}

Answer 1

If you want to control when the dialog closes, make sure the callback for your "submit" button always returns false. Then, in the done() (and probably fail()) callbacks for the ajax function, call bootbox.hideAll() to close the dialog (along with any other dialogs you may have opened).

If you want to only close the current dialog, do something along this line:

var dialog = bootbox.dialog({
    /* rest of your options... */,
    buttons: {
        submit: {
            label: "Submit",
            callback: function() {

                var data = [];

                $.post('/url', data)
                    .done(function(result, status, jqxhr){
                        // if everything went well...
                        dialog.modal('hide');
                    })
                    .fail(function(jqxhr, status, error){
                        // etc.
                    });

                return false;
            }
        }
    }
});

Basically, create a reference to the dialog, which you can then use inside of the ajax callback.