现在的位置: 首页 > 综合 > 正文

添加一个提示操作正在执行请等待的浮动层的几种方法

2012年09月08日 ⁄ 综合 ⁄ 共 4037字 ⁄ 字号 评论关闭

 1.用的是MS的UPDATEPANLE做AJAX时可以采用下面的

Sys.WebForms.PageRequestManager 类

 

管理服务器 UpdatePanel 控件在浏览器中的部分页更新,并通过使用客户端脚本定义属性、事件和方法以自定义 Web 页。

 

<div id="BusyDialog" class="BusyDialogDiv">
        <asp:Image runat="server" ID="BusyImage" ImageUrl="http://images.cnblogs.com/Indicator.gif" />
    </div>
    <script type="text/javascript">
        function showDialogue() {
            DivDialog.ShowModalDialog('BusyDialog');
        }
        DivDialog.CloseDialog('BusyDialog');
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(beginLoading);
        function beginRequest(sender, args) {
            DivDialog.ShowModalDialog('BusyDialog');
        }

        function beginLoading(sender, args) {
            DivDialog.CloseDialog('BusyDialog');
        }
    </script>

 

这部分代码对所有UPDATE里的有刷新动作的都有用

2.JQUERY 处理

jquery中ajaxSend的问题

$('#div').ajaxSend(...);如果一个页面只有一个这种JS不会有问题,但现在情况 是一个页面需要多个,如:$('#div').ajaxSend(...);$('#div2').ajaxSend(...);$('#div3').ajaxSend(...);...
这样在onClick某一个DIV的情况下,所有的容器都会响应ajaxSend(...)里的函数。如何只限制单击ID的容器响应相对的ajaxSend(...)?

解决方案:

 

根据这个方法的定义,当发送ajax请求的时候,jQuery会触发所有的ajaxSend事件。但是你可以通过传入的参数来控制当ajax请求发生时,让那个event执行。

例如,根据ajax请求里的url参数来区分
$('#div').ajaxSend(function(e, xhr, settings) {
      if (settings.url == '/ajax/test') {
            ...
      }
});

$('#div2').ajaxSend(function(e, xhr, settings) {
      if (settings.url == '/ajax/test2') {
            ...
      }
});

追问$('#div2').ajaxSend(function(e, xhr, settings) {
            $('#div2').html('...');           //这里也指定了容器,为什么不在这里面执行,而还是全部执行呢?
}); 

 

这和容器div,div2...是没关系的,官方文档写得很明白不管你设置了多少个ajaxsend callback在有ajax请求的时候都会一起触发。除非用传递的参数区分,在这里ajax请求发生的时候他不知道div,div2...
只是单纯地执行所有预先设置的ajaxSend callback。

你可以在firebug里看一下传入的e里面有没有你需要可以用来区分点击范围的变量

 举例:

 

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
    <script src="http://www.cnblogs.com/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function cookieInfo() {
            var cookie = document.cookie;
            var name = "";
            if (cookie != "") {
                var begin = cookie.indexOf('=') + 1;
                name = cookie.substring(begin, cookie.length);
            }
            return name;
        }
        $(function() {
           
            if (cookieInfo() == "") {
                $("#login").show();
                $("#logInfo").hide();
            }
            else {
                $("#login").hide();
                $("#logInfo").show();
            }
            $("#login").ajaxSend(function() {
                $(this).hide();
                $("#showLog").show();
                $("#showLog").html("请等待...");
            });

            $("#btnLogin").click(function() {
                $.post("/User/Login", { name: $("#txtName").val(), pwd: $("#txtPwd").val() },
                   function(data) {
                       $("#login").show();
                       $("#showLog").hide();
                       if (data.indexOf("ok") != -1) {
                           //alert(document.cookie);
                           var name = cookieInfo();
                           $("#login").html("欢迎你:" + name + "<a href='/User/Logout'>注销</a>");
                       }
                       else {
                           if ($("#login").html().indexOf("用户名或密码错误") == -1)
                               $("#login").prepend("用户名或密码错误<br>");

                       }

                   });
            });
        });
        function dologout() {
            $.get("/User/Logout", function(data) {
                $("#login").show();
                $("#logInfo").hide();
                $("#showLog").hide();
            });
        }
    </script>
</head>
<body>
 <div id="login">  
    用户名:<input type="text" name="txtName" id="txtName" /><br />
    密码:<input type="password" name="txtPwd" id="txtPwd" /><br />
    <input type="button" value="登陆" id="btnLogin"/>   
</div><div id="showLog"></div>   

<div id="logInfo">欢迎你:<%=this.Request.Cookies["user"]==null?"":Request.Cookies["user"].Value%><a href='javascript:dologout()'>注销</a>
</div>

</body>
</html>

 

抱歉!评论已关闭.