在UpdatePanel内jquery easyui效果失效的解决方法

2016-02-19 13:09 0 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享在UpdatePanel内jquery easyui效果失效的解决方法的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

使用easyui 的好处除了界面还不错之外,也因为使用方便。

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
div
div title="搜索" .../div
div title="选择".../div
div title="返回".../div
/div

只要给他定义个相应的class 就能实现各种效果。

但是,把它放在updatepanel里面,且不是首次就让他显示出来的话就出故障了。

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
asp:MultiView runat="server"
asp:View runat="server"
div
div title="搜索"
.../div
div title="选择"
.../div
div title="返回"
.../div
/div
/asp:View
asp:View runat="server"
div
div title="搜索"
.../div
div title="选择"
.../div
div title="返回"
.../div
/div
/asp:View
/asp:MultiView

在multipleView里面定义两个一样的view,内容也一样。并把 MultiView1放到updatepanel里面。

然后设置他显示第一个view

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
MultiView1.ActiveViewIndex =0;

浏览一下。显示正常。但是当我们改变view的显示时,例如把上面的改成 MultiView1.ActiveViewIndex =1;那么第二个veiw的效果就全无了。

到jquery.easyui.min.js 里找原因。看到了这么一句

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
r=$(".easyui-tabs",_1ec);
if(r.length){
r.tabs();

大概就是在网页加载完后,寻找class定义为easyui-tabs 的层。并把效果附加给他。

那么可以想象,当页面加载时,我们显示的是第一个view,那么js就找到view里的层,并赋予其效果。
然后我们在updatepanel里更新了显示的view,内容虽然切换到了第二个view了。但是页面没有重新加载,上面的js代码没有对新的view执行改变。
所以决策就是当updatepanel回发后重新执行js代码。
在页面定义一个重新绑定的函数。

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
function EndRequestHandler() {
$(".easyui-tabs").tabs();
}

再定义一个事件。

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
function reload() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}

add_endRequest
PageRequestManager 类是一个管理浏览器中服务器 UpdatePanel 控件的部分页更新。此外,还定义一些属性、事件和方法,用以通过客户端脚本对网页进行自定义。通过调用 getInstance 方法来得到 PageRequestManager 类的实例。然后通过 add_endRequest 方法来绑定 endRequest 事件(异步回发完成,并且控制权返回到浏览器之后引发)。这样以后,每次updatepanel发生回调后,都会触发EndRequestHandler()函数。重新绑定一次效果。$(document).ready(function() { reload(); })
失效问题就解决了。

来源:https://www.tulaoshi.com/n/20160219/1603121.html

延伸阅读
标签: Web开发
代码如下: $.ajax( { type: "POST", url: "/MemberComment.aspx/GetOrderToBeCommentCount", success: function(result) { //ToDo: } ) 使用时JS也没有报错。这个是我最郁闷的事了。不知道哪错。。 5分钟。。。10分钟。。。。20分钟。。。。。 从c#代码到浏览器一个个排查问题发现都OK。 最后问题的原因是改为如下就OK,少了2...
标签: windows系统
Win8.1系统Hosts文件失效的现象及解决方法 不知大家是否遇到过Hosts文件失效的问题。原本我的Windows 8.1系统的Hosts文件可以正常使用,但是最近不知何故突然失效了。Hosts文件失效给我工作带来很多麻烦,为了分析具体原因,我给大家做个演示测试。 可见hosts文件路径是对的,而且只有一行映射,确保没有其他的干扰项。 ...
标签: Web开发
由于在项目中应用了Jquery Validation表单验证插件,所以要实现在Validation验证完毕后,提交form,然后禁止按钮。 CodeProject上有一个DisableBtnPostBack项目,但不无法和Jquery Validation结合,代码先贴出来,给大家提示下,碰到这种情况不要使用该代码。代码如下: js: 代码 代码如下: function disableBtn(btnID, newText) { Page...
标签: Web开发
很多朋友在使用Deamweaver8的时候都会遇到这样的情况:给当前编辑的文档链接了CSS文件,并对页面元素应用了定义的CSS样式,但在DW8中却看不到任何效果。如下图。 主要原因就是DW8新多出了一个“样式呈现工具栏”,该工具栏允许你轻易的为不同的媒体类型,例如屏幕、手持设备和打印输出进行设计。其他的支持媒体类型有投影设备, TT...
标签: Web开发
大家也可以在jquery easyui来下载,或者去官网下载和查看文档帮助。 我最近也使用了一下jquery easyui里tabs,但是发现一个问题:如果你把tabs的div开始设置为display:none,然后写个function change(){$("#tabs").css("display","block")}来让tabs显示,当执行change()时,结果tabs显示不正常。 本来应该显示为: 结果显示为: ...

经验教程

171

收藏

99
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部