在UpdatePanel内jquery easyui效果失效的解决方法
更新时间：2010年04月11日 21:56:14 作者：
项目中使用到了 updatePanel 和jquery-easyui 。使用updatepanel的好处自然是页面不刷新，用户感觉比较好，同时也减少了一部分数据量的传输。
使用easyui 的好处除了界面还不错之外，也因为使用方便。
<div class="easyui-tabs" style="width: 300px">
<div title="搜索"> ...</div>
<div title="选择">...</div>
<div title="返回">...</div>
</div>
只要给他定义个相应的class 就能实现各种效果。
但是，把它放在updatepanel里面，且不是首次就让他显示出来的话就出故障了。
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<div class="easyui-tabs" style="width: 300px">
<div title="搜索">
...</div>
<div title="选择">
...</div>
<div title="返回">
...</div>
</div>
</asp:View>
<asp:View ID="View2" runat="server">
<div class="easyui-tabs" style="width: 300px">
<div title="搜索">
...</div>
<div title="选择">
...</div>
<div title="返回">
...</div>
</div>
</asp:View>
</asp:MultiView>
在multipleView里面定义两个一样的view，内容也一样。并把 MultiView1放到updatepanel里面。
然后设置他显示第一个view
MultiView1.ActiveViewIndex =0;
浏览一下。显示正常。但是当我们改变view的显示时，例如把上面的改成 MultiView1.ActiveViewIndex =1；那么第二个veiw的效果就全无了。
到jquery.easyui.min.js 里找原因。看到了这么一句
r=$(".easyui-tabs",_1ec);
if(r.length){
r.tabs();
大概就是在网页加载完后，寻找class定义为easyui-tabs 的层。并把效果附加给他。
那么可以想象，当页面加载时，我们显示的是第一个view，那么js就找到view里的层，并赋予其效果。
然后我们在updatepanel里更新了显示的view，内容虽然切换到了第二个view了。但是页面没有重新加载，上面的js代码没有对新的view执行改变。
所以决策就是当updatepanel回发后重新执行js代码。
在页面定义一个重新绑定的函数。
function EndRequestHandler() {
$(".easyui-tabs").tabs();
}
再定义一个事件。
function reload() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
add_endRequest
PageRequestManager 类是一个管理浏览器中服务器 UpdatePanel 控件的部分页更新。此外，还定义一些属性、事件和方法，用以通过客户端脚本对网页进行自定义。通过调用 getInstance 方法来得到 PageRequestManager 类的实例。然后通过 add_endRequest 方法来绑定 endRequest 事件（异步回发完成，并且控制权返回到浏览器之后引发）。这样以后，每次updatepanel发生回调后，都会触发EndRequestHandler（）函数。重新绑定一次效果。$(document).ready(function() { reload(); })
失效问题就解决了。
复制代码 代码如下:
<div class="easyui-tabs" style="width: 300px">
<div title="搜索"> ...</div>
<div title="选择">...</div>
<div title="返回">...</div>
</div>
只要给他定义个相应的class 就能实现各种效果。
但是，把它放在updatepanel里面，且不是首次就让他显示出来的话就出故障了。
复制代码 代码如下:
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<div class="easyui-tabs" style="width: 300px">
<div title="搜索">
...</div>
<div title="选择">
...</div>
<div title="返回">
...</div>
</div>
</asp:View>
<asp:View ID="View2" runat="server">
<div class="easyui-tabs" style="width: 300px">
<div title="搜索">
...</div>
<div title="选择">
...</div>
<div title="返回">
...</div>
</div>
</asp:View>
</asp:MultiView>
在multipleView里面定义两个一样的view，内容也一样。并把 MultiView1放到updatepanel里面。
然后设置他显示第一个view
复制代码 代码如下:
MultiView1.ActiveViewIndex =0;
浏览一下。显示正常。但是当我们改变view的显示时，例如把上面的改成 MultiView1.ActiveViewIndex =1；那么第二个veiw的效果就全无了。
到jquery.easyui.min.js 里找原因。看到了这么一句
复制代码 代码如下:
r=$(".easyui-tabs",_1ec);
if(r.length){
r.tabs();
大概就是在网页加载完后，寻找class定义为easyui-tabs 的层。并把效果附加给他。
那么可以想象，当页面加载时，我们显示的是第一个view，那么js就找到view里的层，并赋予其效果。
然后我们在updatepanel里更新了显示的view，内容虽然切换到了第二个view了。但是页面没有重新加载，上面的js代码没有对新的view执行改变。
所以决策就是当updatepanel回发后重新执行js代码。
在页面定义一个重新绑定的函数。
复制代码 代码如下:
function EndRequestHandler() {
$(".easyui-tabs").tabs();
}
再定义一个事件。
复制代码 代码如下:
function reload() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
add_endRequest
PageRequestManager 类是一个管理浏览器中服务器 UpdatePanel 控件的部分页更新。此外，还定义一些属性、事件和方法，用以通过客户端脚本对网页进行自定义。通过调用 getInstance 方法来得到 PageRequestManager 类的实例。然后通过 add_endRequest 方法来绑定 endRequest 事件（异步回发完成，并且控制权返回到浏览器之后引发）。这样以后，每次updatepanel发生回调后，都会触发EndRequestHandler（）函数。重新绑定一次效果。$(document).ready(function() { reload(); })
失效问题就解决了。
相关文章
json数据是一种经型的实时数据交互的数据存储方法，使用到最多的应该是ajax与json配合使用了，下面我来给大家介绍jquery处理json数据方法2014-01-01
jQuery 美元符冲突的解决方法，使用jquery与别的js库共同使用的时候需要注意的地方。2010-03-03
这篇文章主要介绍了JQuery常见节点操作,结合实例形式分析了jQuery针对元素节点的添加、删除常见操作函数使用技巧与相关注意事项,需要的朋友可以参考下2019-05-05
jQuery UI工具提示框部件Tooltip Widget
这篇文章介绍了jQuery UI工具提示框部件Tooltip Widget，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要为大家详细介绍了jquery插件实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
本文是对jquery.validate的使用进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
下面小编就为大家带来一篇jQuery读取本地的json文件(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
下面小编就为大家带来一篇使用jquery获取url及url参数的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
精彩的弹幕效果分享给大家，具有一定的参考价值，感兴趣的朋友可以尝试制作弹幕，具体内容如下2016-07-07
Juery解决tablesorter中文排序和字符范围的方法
这篇文章主要介绍了Juery解决tablesorter中文排序和字符范围的方法,实例分析了jQuery针对tablesorter中文排序和字符范围的解决方法,需要的朋友可以参考下2015-05-05
最新评论