Jquery插件blockUI无法使用ajax


Jquery plugin blockUI not working with ajax

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

我的代码如下..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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调试工具的异常执行顺序。因为blockui code不应该在ajax完成后执行)

    这不是我想要的，我无法弄清楚这一点。

    相关讨论

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    $.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会在请求发出后立即阻止，并在完成后立即取消阻止。

    相关讨论

    我有同样的问题因为我使用了同步ajax调用，即aync是false

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

    1
    $.ajaxSetup({ async :true});

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

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

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

    2016-01-25更新：

    注意：

  • 这个答案在2012-09-26得到解答。我现在不知道chrome或firefox在执行async call时是否还有abnormal execution sequence的东西。(但我记得那时，在行上设置a break point - 在chrome调试工具中$.blockUI({ message: 'OK' });，输入< x5>(转到下一个)，会看到镀铬刚刚超过断点，没有任何问题)
  • 实际上问题的代码没有错误。我想为什么我问这个问题只是因为我看到调试工具中的异常执行顺序，这让我感到困惑，答案就在这里。如果您想了解代码无效的原因或其他原因，您最好找到其他答案或提出新问题。
  • 关于abnormal execution sequence，现在，我想也许是blockui。因为我们没有看到$.blockUI()是如何工作的，所以block element function可能存储在chrome执行回调堆栈的深处。我可以将断点放在错误的行上如果该假设为真(那么可能需要在blockui source code中设置断点)

    • 并且，我多年没有使用blockui。如果你只想要一个块消息框，我建议sweetalert。

    相关讨论