JQuery和UpdatePannel的问题

最近在做一个项目,因为涉及到的字段数量很多所以想偷把懒,便使用了UpdatePannel,然后也用上了Jquery的插件做效果,然而当updatepannel中按钮点击后,jquery代码及样式都不见了,因为之前遇到过js类似的问题,所以就特意查了下网络上各大虾的解说,以下总结下大虾门的说法,顺便将自己的写法也记录下来。

以下是 LanceZhang‘s Tech Blog:原文地址 http://www.cnblogs.com/blodfox777/archive/2008/12/08/1347805.html

问题重现:

1. 在页面中添加ScriptManager和UpdatePanel

2. 在UpdatePanel中添加元素A

3. 用jQuery对元素A添加X效果

4. 在UpdatePanel中加一个Button B用作postback

结果:在第一次页面加载时,元素A的X效果正常,点击B之后,页面局部刷新,此时,元素A失去X效果

分析1:UpdatePanel

UpdatePanel在应用中主要用于局部刷新,避免整个页面的Postback。

UpdatePanel实现局部刷新的核心在于MicrosoftAjaxWebForm.js文件,它的局部刷新过程就是将页面提交到服务端(包含ViewState),执行服务端代码后异步将在UpdatePanel内的HTML进行重新呈现。

在此过程中,页面的其它部分并没有状态更改。

分析2:jQuery

jQuery可以通过简单的代码对HTML元素添加各种属性和事件句柄,我们可以在这里看到官方的文档:

Tutorials:How jQuery Works
http://docs.jquery.com/How_jQuery_Works

在这里,我们可以得知,jQuery有个重要的事件标记“ready”,一般对HTML元素的效果和事件句柄都通过这个ready事件来添加,如下:

$(document).ready(function () {
    $("p").text("The DOM is now loaded and can be manipulated.");
});

官方对此的说明是:ready事件会在DOM完全加载后运行一次,OK,至此,问题的原因差不多明白了:

原因:

因为在UpdatePanel局部刷新之后,其中的元素A被重写,而此时整个DOM树并没有重新加载,所以jQuery的ready事件并没有触发,所以元素A就失去了原有的特效。

解决方案:

我们可以将ready事件中执行的代码提取出来,然后通过捕获ScriptManager的EndRequest事件,在每次UpdatePanel局部刷新之后执行一次jQuery初始化代码,如下所示:

<script type="text/javascript">
        function load() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        }

function EndRequestHandler() {
            ReadyFunction1();
            ReadyFunction2();
            ReadyFunction3();
        }
    </script>

<body >

以下是我试验的代码(注意红色标示的代码)
实现方式1:

<link href="CSS/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />

    <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="Scripts/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

        $().ready(function () {

         <span style="color: #ff0000;">   load();

</span>            addTabs();

        });

        function addTabs() {

            $("#tabs").tabs();

        }

        function <span style="color: #ff0000;">load() </span>{

            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(<span style="color: #ff0000;">EndRequestHandler</span>);

        }

        function <span style="color: #ff0000;">EndRequestHandler()</span> {

            addTabs();

        }

    </script>

<asp:ScriptManager ID="SM1" runat="server">

    </asp:ScriptManager>

    <div id="tabs">

        <ul>

            <li><a href="#tabs-1">Nunc tincidunt</a></li>

            <li><a href="#tabs-2">Proin dolor</a></li>

            <li><a href="#tabs-3">Aenean lacinia</a></li>

        </ul>

        <div id="tabs-1">

            <p>

                Tab 1 content</p>

        </div>

        <div id="tabs-2">

            <asp:UpdatePanel ID="Up_1" runat="server">

                <contenttemplate>

            <p>

                Tab 2 content</p>

                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /></contenttemplate>

                <triggers>

            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

           

            </triggers> </asp:UpdatePanel>

        </div>

        <div id="tabs-3">

            <p>

                Tab 3 content</p>

        </div>

    </div>

方法2:
protected void Button1_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this.Up_1, this.GetType(), "asdfas", "addTabs();", true);
    }

时间: 2024-11-23 02:13:56

JQuery和UpdatePannel的问题的相关文章

WebForm使用JQuery实现DropDownList无刷新联动

原来用的微软封装的Ajax控件UpdatePannel和ScriptManager去实现无刷新联动,但一直出现意料之外的现象导致不正常联动.单独的做demo就没事,放到系统中就出问题,经过调试之后仍然不解.条条大路通罗马,还不信能被憋死了.众所周知,JQuery封装了Ajax,调用起来比原生的Ajax要好用的多,实现异步刷新当然也更一些了,虽然功能简单,直接看代码: 1.  JS代码: <span style="font-size:18px;"><span style

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

微信生成二维码 只需一个网址即刻 还有jquery生成二维码

<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text=http://123.net/index.php?s=/Home/Index/yanzheng/mai/{$dange.id}" style="width: 5rem; margin-bottom: 1rem;" > </div> http://qr.tops

Jquery基础总结

jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. <ul> <li id=&quo

初识jQuery

jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:

zepto与jquery冲突的解决

问题出现的背景: 在light7框架下搭建的触屏版项目中,要拓展一个投票系统,其中投票系统有一个比较完善的上传组件,但是此组件是依赖zepto的,而原来的项目是依赖jQuery的,所以就会遇到冲突的问题: 解决方法1: jquery有一个方法叫noConflict() ,可以把jquery的$改掉. var jq=$.noConflict(); 这个时候用jq来代替jquery的$吧. 解决方法2: zepto的符号改掉 window.zp=window.Zepto = Zepto 在zepto

jQuery父级以及同级元素查找的实例

父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(

jQuery EasyUI---DataGrid

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../jquery-1.4.2.min.js" ty

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不