[zt]ASP.NET AJAX之UpdatePanel 和JQUERY冲突

======================================================
注：本文源代码点此下载
======================================================

今天在开发一个加班的表单的时候需要通过判断工作日和非工作日来加载时间。一个文本框用了jquery的日历,文本框从数据库读取数据,就遇到类似问题。

终于找到了解决方案,如下:

原文url:

http://www.biao166.cn/updatepanel-jquery.html

最近一个项目遇到了一点点麻烦,请看问题描述:

在第一次页面加载时,元素a的x效果正常,点击b之后,页面局部刷新,此时,回到a,元素a失去x效果.

开始以为是前端我这到程序员那里出现问题,但仔细检查之后发现没有,后来了解了下页面应用了asp.net ajax局部刷新,这就明朗了,估计是和jquery冲突了。

问题重现:

1. asp.net ajax在页面中添加scriptmanager和updatepanel

2. 在updatepanel中添加元素a

3. 用jquery对元素a添加x效果

4. 在updatepanel中加一个button b用作postback

这样问题就出现了。

分析1:

updatepanel在应用中主要用于局部刷新,避免整个页面的postback。updatepanel实现局部刷新的核心在于microsoftajaxwebform.js文件,它的局部刷新过程就是将页面提交到服务端(包含viewstate),执行服务端代码后异步将在updatepanel内的html进行重新呈现。在此过程中,页面的其它部分并没有状态更改。

分析2:

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初始化代码,如下所示:

最后就是需要 添加 body οnlοad="load()">

而我这里是sharepoint的应用程序页,继承了sharepoint类,没有body标签,就只能使用

$(document.body).bind(onload, load());

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/