如何从 Ajax 调用中获取要在 Bootbox 按钮功能中使用的值？

Question

我正在为我的模式使用 Bootbox，但我无法显示来自 Ajax 调用模式的表单验证错误。我模式上提交按钮的回调函数调用 add_college 函数通过 Ajax.

提交表单

当存在验证错误时，模态将填充验证错误。问题是无论是否存在验证错误，模式都会关闭。我希望模式仅在没有验证错误时才关闭。

我知道我可以在我的按钮的回调函数中 return false 当出现验证错误时不关闭它但是我无法知道是否存在验证错误因为我不能 return Ajax 调用中的一个值，因为它是异步的。正确的做法是什么？

这是我的代码：

$('#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

如果您想控制对话框何时关闭，请确保 "submit" 按钮的回调始终 returns false。然后，在 ajax 函数的 done()（可能还有 fail()）回调中，调用 bootbox.hideAll() 关闭对话框（以及您可能打开的任何其他对话框）。

如果您只想关闭当前对话框，请按以下行操作：

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;
            }
        }
    }
});

基本上，创建对对话框的引用，然后您可以在 ajax 回调中使用它。

如何从 Ajax 调用中获取要在 Bootbox 按钮功能中使用的值？

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

javascript

jquery

ajax

twitter-bootstrap

bootbox