Jquery插件blockUI无法使用ajax

I want to block the current page when a specific ajax call is made and use a blockUI as a message box. I can't just use $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

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

My code is the following..

我的代码如下..

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

The scenario is that when I click the .submit button, the page is blocked and a ajax call is made to the server to get a data response. When the ajax call is successful, I unblock the current page and if data.status is 'OK', I show a message box (also based on blockUI plugin). Else I show an error on the current page, and then unblock it.

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

Edit at 2016, there is a edit which change the question meaning(maybe due to my very poor English at that moment), I have rolled change back here, and make it more clear, please do not change below again.

在2016年编辑,有一个改变问题意义的编辑(可能是由于我当时非常糟糕的英语),我已经将更改回到这里,并使其更清楚,请不要再在下面更改。

But in fact, only after ajax call is completed (debug step over the code in ajax complete handler), then see:

但事实上,只有在ajax调用完成后(调试步骤完成ajax完整处理程序中的代码),然后看到:

1. first $.blockUI(); excuted

第一个$ .blockUI(); excuted

2. execute $.blockUI({ message: 'OK' }) or not

执行$ .blockUI({message:'确定'})或不执行

3. then $.unblockUI() be called

然后调用$ .unblockUI()

(Above is what I mean abnormal execution sequence of chrome or firefox debug tool in the answer.because blockui code should not be executed after ajax complete)

(上面是我的意思是答案中的chrome或firefox调试工具的异常执行顺序。因为在ajax完成后不应该执行blockui代码)

It's not what I want, and I can't figure this out.

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

4 个解决方案

#1

Set the Block UI in the beforeSend function and the unBlockUI in the complete function so that you get the behavior you are expecting.

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

This will make sure your Ui will block as soon as the request is sent and unblock as soon as its completed..

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

#2

I had the same issue because i used sync ajax call that is aync is false

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

I solved it by making an ajax call async to true

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

$.ajaxSetup({ async :true});

#3

you can make your code much simpler with a wrapper around ajax such as ajaxBlockUI - see https://*.com/a/28358070/460084

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

all you'll have to do is add blockUI:true to ajaxBlockUI and the actual blocking and unblocking the UI will be handled internally.

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

#4

The problem was an execution sequence anomaly caused by browser's debug tools in both chrome and firefox. With the debugger, I confirmed whether $.blockUI() executed before the ajax call or not. It was always executing after I stepped over the complete handler in ajax. Just now, I set a breakpoint in server side code and I found that execution sequence becomes normal as I want it be!

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

update at 2016-01-25:

2016-01-25更新:

Note:

1. This answer is answered at 2012-09-26. I don't know whether chrome or firefox still has something abnormal execution sequence when doing a async call now.(But I remember, at that time, set a break point on the line - $.blockUI({ message: 'OK' }); in chrome debug tool, type F10(go next) , would see chrome just step over the break point, and nothing heppen)

这个答案在2012-09-26得到解答。我现在不知道chrome或firefox在执行异步调用时是否还有异常执行顺序。(但我记得,那时候,在行上设置一个断点 - $ .blockUI({message:'OK'} );在chrome调试工具中,键入F10(转到下一个),会看到chrome只是跳过断点,没有任何问题)

2. Actually there is no error in the question's code. I think why I ask this question is only because I see the abnormal execution sequence in debug tool, which make me confuse, and the answer is here. If you want to find out why your code not work or something else , you'd better to find other answers or ask a new question.

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

3. About abnormal execution sequence, now, I think maybe it is by blockui too. Because we don't see how $.blockUI() worked, maybe block element function is stored deep inside the chrome execution callback stack. I may place the breakpoint at wrong line If that assumption is true(so maybe need set breakpoint in blockui source code)

关于异常执行顺序,现在,我想也许是通过blockui。因为我们没有看到$ .blockUI()如何工作,所以块元素函数可能存储在chrome执行回调堆栈的深处。我可以将断点放在错误的行上如果该假设为真(那么可能需要在blockui源代码中设置断点)

And, I haven't work with blockui for many years.If you just want a block message box, I suggest sweetalert.

并且,我多年没有使用过blockui。如果你只想要一个阻止消息框,我建议sweetalert。