3

我想在进行特定的 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调用完成之后（debug step over 中的代码ajax complete handler），然后看：

  1. 首次$.blockUI();执行
  2. 执行$.blockUI({ message: 'OK' })与否
  3. 然后$.unblockUI()被称为

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

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

4

4 回答 4

4

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

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

$.ajaxSetup({ async :true});
于 2014-03-30T03:30:16.587 回答
3

在 beforeSend 函数中设置 Block UI 和在 complete 函数中设置 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 在请求发送后立即阻塞，并在请求完成后立即解除阻塞..

于 2012-09-26T04:43:22.093 回答
0

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

2016-01-25 更新：

笔记：

  1. 这个答案在 2012-09-26 回答。不知道chrome还是firefox现在abnormal execution sequence做的时候还有点东西async call。（不过我记得，当时设置a break point就行了——$.blockUI({ message: 'OK' });在chrome调试工具中，输入F10（go next），会看到chrome刚刚跨过break点，什么也没有发生）
  2. 实际上问题的代码没有错误。我想我为什么要问这个问题只是因为我在调试工具中看到了异常的执行顺序，这让我感到困惑，答案就在这里。如果你想知道为什么你的代码不起作用或其他什么，你最好找到其他答案或提出一个新问题。
  3. 关于abnormal execution sequence，现在，我想也许它blockui也是。因为我们没有看到它是如何$.blockUI()工作的，所以可能block element function存储在 chrome 执行回调堆栈的深处。我可能会将断点放在错误的行如果这个假设是真的（所以可能需要在中设置断点blockui source code）

而且，我已经很多年没有合作了blockui。如果你只是想要一个阻止消息框，我建议sweetalert。

于 2012-09-26T06:38:57.843 回答
0

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

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

于 2015-02-09T02:25:28.657 回答