Question

我想在进行特定的ajax调用时阻止当前页面，并使用blockUI作为消息框。我不能只使用$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

我的代码如下..

bc.find('.submit').click(function (e) {
    e.preventDefault();
    if ($(this).hasClass('lock'))
        return;
    $.blockUI();
    $(this).addClass('lock');
    bc.submit();
});

var validator;
validator = bc.validate({
    ignore: '',
    rules: {
        UserName: {
            required: true
        }
    },
    messages: {
        UserName: 'must have',
    },
    submitHandler: function (form) {
        $.ajax({
            url: '/yyyy/xxxx',
            type: 'POST',
            data: postdata,
            complete: function () {
                bc.find('.submit').removeClass('lock');
            },
            success: function (data) {
                if (data.status == 'OK') {
                    $.blockUI({ message: 'OK' });
                    ......
                }
                else {
                    switch (data.status) {
                        case 'xxx':
                        ......
                    }
                    $.unblockUI();
                }
            },
            error: function () {
                $.unblockUI();
                alert('xxx');
            }
        });
    }
});

情况是，当我单击.submit按钮时，页面被阻止，并且对服务器进行ajax调用以获取数据响应。当ajax调用成功时，我取消阻止当前页面，如果data.status为'OK'，我会显示一个消息框（也基于blockUI插件）。否则，我在当前页面上显示错误，然后取消阻止它。

在2016年编辑，有一个更改问题意义的编辑（可能是由于我当时的英语很差），我已经将更改回到这里，并且更清楚，请不要在下面更改试。

但事实上， 仅在ajax调用完成后 （对ajax complete handler中代码的调试步骤），然后看：

首先$.blockUI();执行
执行$.blockUI({ message: 'OK' })或不执行
然后$.unblockUI()被称为

（上面是我的意思是答案中的chrome或firefox调试工具的异常执行顺序。因为{jjx完成后blockui code不应该执行）

这不是我想要的，我无法理解这一点。

Answer 1

在beforeSend函数中设置Block UI，在完整函数中设置unBlockUI，以便获得您期望的行为。

$.ajax({
            url: '/yyyy/xxxx',
            type: 'POST',
            data: postdata,
            beforeSend : function() {
               $.blockUI({ message: 'OK' });
            }, 
            complete: function () {
                bc.find('.submit').removeClass('lock');
                 $.unblockUI();
            },
            success: function (data) {
                if (data.status == 'OK') {

                    ......
                }
                else {
                    switch (data.status) {
                        case 'xxx':
                        ......
                    }

                }
            },
            error: function () {
                $.unblockUI();
                alert('xxx');
            }
        });

这将确保您的Ui会在请求发出后立即阻止，并在完成后立即取消阻止。

Answer 2

我遇到了同样的问题，因为我使用的同步ajax调用是async是false

我通过将ajax调用异步调用为真来解决它

$.ajaxSetup({ async :true});

Answer 3

问题是由chrome和firefox中的浏览器调试工具引起的执行序列异常。使用调试器，我确认在ajax调用之前是否执行了$.blockUI()。在我跳过ajax中的完整处理程序后，它总是在执行。刚才，我在服务器端代码中设置了一个断点，我发现执行顺序正常，因为我想要它！

2016-01-25更新：

注意：

这个答案的回答是在2012-09-26。我现在在做abnormal execution sequence时不知道chrome或firefox是否还有async call。（但我记得当时在行上设置a break point - {{1}在chrome调试工具中，键入$.blockUI({ message: 'OK' });（转到下一个），会看到chrome只是跳过断点，没有任何问题）

实际上问题代码中没有错误。我想为什么我问这个问题只是因为我看到调试工具中的异常执行顺序，这让我感到困惑，答案就在这里。如果您想了解您的代码无法使用的原因或其他内容，您最好找到其他答案或提出新问题。

关于F10，现在，我想也许是abnormal execution sequence。因为我们没有看到blockui如何工作，所以可能$.blockUI()存储在chrome执行回调堆栈的深处。我可以将断点放在错误的行上如果该假设为真（那么可能需要在block element function中设置断点）

而且，我多年没有使用blockui source code。如果您只想要一个阻止消息框，我建议sweetalert。

Answer 4

使用ajax（如ajaxBlockUI）的包装器可以使代码更简单 - 请参阅https://stackoverflow.com/a/28358070/460084

所有你需要做的就是添加blockUI：true到ajaxBlockUI，实际阻止和解锁UI将在内部处理。

Jquery插件blockUI无法使用ajax

4 个答案: