使用引导程序的 ajax 请求模式排序

Question

我想在我的应用程序中全局使用模态窗口，所以在 jquery 的 ajax 完成和 ajax 启动配置上进行设置。我遇到了一个问题，即从 ajax 成功回调中调用的模式窗口与我的 ajax 通知模式冲突，因为它们没有按我想要的顺序执行。

在这个演示中，我希望它先提示 1，然后是 2，然后是 3，但它是先执行成功处理程序...

http://jsfiddle.net/AsRxL/

$(document).ajaxStart(function(){
    alert("1")
    $("#first").modal("show")
})
$(document).ajaxComplete(function(){
    alert("2")
    $("#first").modal("hide")
})

$.get('./',function(d, e){
    alert("3")
    // now the problem is the previous modal has not
    // yet fully dismissed
    $("#second").modal("show")
})

如何让 ajaxComplete 函数触发，并在执行任何回调函数之前删除我的通知模式，这些回调函数本身可能会创建模式窗口？

Answer 1

它们没有按您想要的顺序执行的原因是在 jQuery 文档中 (http://api.jquery.com/ajaxComplete/, http://api.jquery.com/ajaxStart/)

AjaxStart 事件在您的 ajax 请求实施之前触发。

AjaxComplete 事件在您的 ajax 完成实施之后触发。

$(document).ajaxStart(function(){
    alert("AjaxStart");
});

$(document).ajaxComplete(function(){
    alert("AjaxComplete");
});

$.get('./',function(d, e){
    alert("Get A Start")
}).done(function(){
    alert("Get A Done");
});

$.get('./',function(d, e){
    alert("Get B Start")
}).done(function(){
    alert("Get B Done");
});

因此，如果您运行此小提琴 (http://jsfiddle.net/KbzCk/)，您将看到正确的执行顺序。

如果您使用的是 bootstrap 3 模式，请尝试检查事件部分

$('#modal-id').on('hidden.bs.modal', function () {
    //show another modal
})

尽管如此，显示如此多的模态窗口似乎并不是一个好方法。

如果您只使用模态通知，请尝试使用 toastr：http://www.johnpapa.net/toastr100beta/