jQuery blockUI插件在ajax提交的时候的用法(block不起作用)

阅读更多

在开发过程中出现一个问题，就是在IE7,8,9 ，Chrome中block不起作用。

 

原来的代码：

jQuery.blockUI({ message: blockmsg, css: { padding: 25, color: '#fff', border: '3px solid #aaa', backgroundColor: '#507691'} });

        
            $.ajax({
                type: "post",
                url: "/PersonalizerPreViewHandler.ashx",
                //dataType: "json",
                async: false,//写这句话的目的是，当ajax调用成功后，再调用btn的后台方法。
                data: { 'values': inputvaluesJS },
                success: function (data) {
                    //var leftA = divid.replace("div", "divimg");
                    //$("#" + leftA + " img").attr("src", data);
                    if (obj != "order" || data.indexOf("error_") > -1) {
                        jQuery.unblockUI();
                    }

                    if (data.indexOf("error_") > -1) {
                        alert(data.substring(5, data.length - 1));

                    } else {
                        PreviewImage(data,obj);
                    }
                },
                error: function (err) {
                    jQuery.unblockUI();
                    alert("error:" + err);
                    return false;
                }
            });

 这样写后就出现了我之前的问题，block不起作用了。

查了很久，看了源码发现在blockui的js中有这样的语句，

setTimeout(function(){focus(back)},10);


setTimeout(function() { reset(els,data,opts,el); }, opts.fadeOut);

 

我想是不是因为这个原因再加上ajax的同步问题，队列顺序改变造成的。

于是，我修改了正确的代码如下 ：

jQuery.blockUI({ message: blockmsg, css: { padding: 25, color: '#fff', border: '3px solid #aaa', backgroundColor: '#507691'} });

        setTimeout(function () {
            $.ajax({
                type: "post",
                url: "/PersonalizerPreViewHandler.ashx",
                //dataType: "json",
                async: false,
                data: { 'values': inputvaluesJS },
                success: function (data) {
                    //var leftA = divid.replace("div", "divimg");
                    //$("#" + leftA + " img").attr("src", data);
                    if (obj != "order" || data.indexOf("error_") > -1) {
                        jQuery.unblockUI();
                    }

                    if (data.indexOf("error_") > -1) {
                        alert(data.substring(5, data.length - 1));

                    } else {
                        PreviewImage(data,obj);
                    }
                },
                error: function (err) {
                    jQuery.unblockUI();
                    alert("error:" + err);
                    return false;
                }
            });
        },100);

 注意：

1.我使用的jquery是1.6.1min

2.Jquery.block是2.08

3.我从网上查过使用ajax  --beforesend还是不行，我想应该是还是没有改变settimeout的轨迹吧，代码如下：

 

    $.ajax({   
                                 type: "POST",   
                                  url: "GetFreeStand.do",   
                                  data:   "hid="+$("#hall").val()+"&pid="+$("#plan").val(),   
                                  dataType:'json',   
                                  async: false,   
                                  beforeSend:function(){   
                                     $.blockUI({message:'获取大厅大厅的空闲摊位，请稍候...'});   
                                 },   
                                 complete: function() {   
                                     $.unblockUI();   
                                 } ,   
                                  success: function(data){      
                                     $("#stand").empty();   
                                    for(var i=0;i