`

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<data.rows.length;i++){   
                                        var row = data.rows[i];                        
                                         $("#stand")[0].options.add(new Option(row.name,row.id));   
                                     }   
                                  }   
                             });  

 

 

 

 

 

0
0
分享到:
评论

相关推荐

    jquery.blockui遮罩插件

    - **Ajax集成**:与jQuery的Ajax方法无缝集成,自动在请求开始时显示锁定效果,在请求完成后解除锁定。 - **可配置性**:提供丰富的配置选项,允许调整遮罩颜色、透明度、动画效果等,以适应不同设计风格。 - **易用...

    jQuery BlockUI 插件(遮罩层)

    在描述中提到的链接是CSDN博主evangel_z的一篇博客文章,详细介绍了如何使用jQuery BlockUI插件。通过这篇文章,我们可以了解到该插件的基本用法和一些高级特性。 首先,要使用jQuery BlockUI,你需要在页面中引入...

    锁屏 jQuery插件 blockUI

    总的来说,jQuery BlockUI 插件是实现页面锁定功能的强大工具,它的灵活性和易用性使得它在各种项目中都能发挥重要作用。无论是简单的全屏锁定,还是复杂的局部锁定和自定义消息,BlockUI 都能轻松应对。通过熟练...

    Jquery BlockUI的使用

    本文将深入探讨jQuery BlockUI的使用方法、核心功能以及实际应用场景。 一、BlockUI的基本使用 1. 引入库文件 首先,确保你的HTML页面中引入了jQuery库(例如`jquery-1.7.min.js`)以及BlockUI插件(例如`jquery....

    jquery.blockUI

    《jQuery BlockUI插件详解与应用》 在Web开发中,用户体验是至关重要的,尤其是在进行异步操作(如Ajax请求)时,为了防止用户在数据处理完成前误操作,我们通常需要一种机制来暂时禁用页面上的交互。jQuery ...

    jquery blockUI 用法

    在 `jQuery.blockUI` 的用法中,首先需要引入 jQuery 库和 blockUI 插件的 JavaScript 文件。从提供的文件列表来看,`jquery-1.6.1.min.js` 是 jQuery 的库文件,而 `jquery.blockUI.js` 则是 blockUI 插件本身。在 ...

    Jquery 等待弹出框插件jquery.blockUI(遮罩蒙板)

    1. 确保在jQuery库之后加载BlockUI插件,否则可能会导致插件无法正常工作。 2. 在解除遮罩层时,如果页面有未完成的异步请求,可能会造成用户体验不佳。确保在所有操作完成后调用 `$.unblockUI()`。 3. 遮罩层的样式...

    jquery blockUI 頁面遮罩的特效

    在HTML页面中,你需要引入jQuery库和BlockUI插件的JS文件。通常,你可以在`&lt;head&gt;`标签内添加如下代码: ```html &lt;script src="https://code.jquery.com/jquery-3.x.min.js"&gt;&lt;/script&gt; &lt;script src="jquery.blockUI...

    基于jquery的blockui插件显示弹出层

    总的来说,jQuery BlockUI插件提供了一种灵活且易于使用的机制,可以在网页中实现丰富的弹出层功能。通过调整配置参数,你可以轻松定制弹出层的外观和行为,满足各种交互设计需求。无论是在处理异步请求、显示提示...

    blockUI弹出层

    在使用 BlockUI 插件时,确保引入了 jQuery 和 BlockUI 的 JavaScript 文件,以及相应的 CSS 样式文件。然后,根据项目需求编写相应的 JavaScript 代码来控制弹出层的显示和隐藏。 在“blockUI”压缩包中,可能包含...

    jquery 点击新闻出现遮罩效果 后台asp

    要使用`jquery.blockUI`,你需要先将其引入到你的HTML文件中,然后在jQuery代码中调用`.block()`方法: ```html &lt;script src="path/to/jquery.js"&gt; &lt;script src="path/to/jquery.blockUI.js"&gt; $(document).ready...

    Block.UI示例

    Block.UI 是一个基于 jQuery 的插件,主要用于在网页中实现页面元素或整个浏览器窗口的锁定,也就是创建一种“模式窗口”效果。这种效果通常用于在进行异步操作(如 AJAX 请求)时,防止用户在数据处理完成前进行...

    jquery.blockUI.js上传滚动等待效果实现思路及代码

    `jquery.blockUI.js`是一个jQuery插件,用于创建页面元素的锁定或遮罩效果,常用于显示加载指示器或在用户执行操作时阻止用户界面交互。在这个特定的场景中,它被用来实现在文件上传或数据请求期间的滚动等待效果。 ...

Global site tag (gtag.js) - Google Analytics