在UpdatePanel內(nèi)jquery easyui效果失效的解決方法
更新時(shí)間:2010年04月11日 21:56:14 作者:
項(xiàng)目中使用到了 updatePanel 和jquery-easyui 。使用updatepanel的好處自然是頁面不刷新,用戶感覺比較好,同時(shí)也減少了一部分?jǐn)?shù)據(jù)量的傳輸。
使用easyui 的好處除了界面還不錯(cuò)之外,也因?yàn)槭褂梅奖恪?
<div class="easyui-tabs" style="width: 300px">
<div title="搜索"> ...</div>
<div title="選擇">...</div>
<div title="返回">...</div>
</div>
只要給他定義個(gè)相應(yīng)的class 就能實(shí)現(xiàn)各種效果。

但是,把它放在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里面定義兩個(gè)一樣的view,內(nèi)容也一樣。并把 MultiView1放到updatepanel里面。
然后設(shè)置他顯示第一個(gè)view
MultiView1.ActiveViewIndex =0;
瀏覽一下。顯示正常。但是當(dāng)我們改變view的顯示時(shí),例如把上面的改成 MultiView1.ActiveViewIndex =1;那么第二個(gè)veiw的效果就全無了。
到j(luò)query.easyui.min.js 里找原因??吹搅诉@么一句
r=$(".easyui-tabs",_1ec);
if(r.length){
r.tabs();
大概就是在網(wǎng)頁加載完后,尋找class定義為easyui-tabs 的層。并把效果附加給他。
那么可以想象,當(dāng)頁面加載時(shí),我們顯示的是第一個(gè)view,那么js就找到view里的層,并賦予其效果。
然后我們?cè)趗pdatepanel里更新了顯示的view,內(nèi)容雖然切換到了第二個(gè)view了。但是頁面沒有重新加載,上面的js代碼沒有對(duì)新的view執(zhí)行改變。
所以決策就是當(dāng)updatepanel回發(fā)后重新執(zhí)行js代碼。
在頁面定義一個(gè)重新綁定的函數(shù)。
function EndRequestHandler() {
$(".easyui-tabs").tabs();
}
再定義一個(gè)事件。
function reload() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
add_endRequest
PageRequestManager 類是一個(gè)管理瀏覽器中服務(wù)器 UpdatePanel 控件的部分頁更新。此外,還定義一些屬性、事件和方法,用以通過客戶端腳本對(duì)網(wǎng)頁進(jìn)行自定義。通過調(diào)用 getInstance 方法來得到 PageRequestManager 類的實(shí)例。然后通過 add_endRequest 方法來綁定 endRequest 事件(異步回發(fā)完成,并且控制權(quán)返回到瀏覽器之后引發(fā))。這樣以后,每次updatepanel發(fā)生回調(diào)后,都會(huì)觸發(fā)EndRequestHandler()函數(shù)。重新綁定一次效果。$(document).ready(function() { reload(); })
失效問題就解決了。
復(fù)制代碼 代碼如下:
<div class="easyui-tabs" style="width: 300px">
<div title="搜索"> ...</div>
<div title="選擇">...</div>
<div title="返回">...</div>
</div>
只要給他定義個(gè)相應(yīng)的class 就能實(shí)現(xiàn)各種效果。

但是,把它放在updatepanel里面,且不是首次就讓他顯示出來的話就出故障了。
復(fù)制代碼 代碼如下:
<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里面定義兩個(gè)一樣的view,內(nèi)容也一樣。并把 MultiView1放到updatepanel里面。
然后設(shè)置他顯示第一個(gè)view
復(fù)制代碼 代碼如下:
MultiView1.ActiveViewIndex =0;
瀏覽一下。顯示正常。但是當(dāng)我們改變view的顯示時(shí),例如把上面的改成 MultiView1.ActiveViewIndex =1;那么第二個(gè)veiw的效果就全無了。
到j(luò)query.easyui.min.js 里找原因??吹搅诉@么一句
復(fù)制代碼 代碼如下:
r=$(".easyui-tabs",_1ec);
if(r.length){
r.tabs();
大概就是在網(wǎng)頁加載完后,尋找class定義為easyui-tabs 的層。并把效果附加給他。
那么可以想象,當(dāng)頁面加載時(shí),我們顯示的是第一個(gè)view,那么js就找到view里的層,并賦予其效果。
然后我們?cè)趗pdatepanel里更新了顯示的view,內(nèi)容雖然切換到了第二個(gè)view了。但是頁面沒有重新加載,上面的js代碼沒有對(duì)新的view執(zhí)行改變。
所以決策就是當(dāng)updatepanel回發(fā)后重新執(zhí)行js代碼。
在頁面定義一個(gè)重新綁定的函數(shù)。
復(fù)制代碼 代碼如下:
function EndRequestHandler() {
$(".easyui-tabs").tabs();
}
再定義一個(gè)事件。
復(fù)制代碼 代碼如下:
function reload() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
add_endRequest
PageRequestManager 類是一個(gè)管理瀏覽器中服務(wù)器 UpdatePanel 控件的部分頁更新。此外,還定義一些屬性、事件和方法,用以通過客戶端腳本對(duì)網(wǎng)頁進(jìn)行自定義。通過調(diào)用 getInstance 方法來得到 PageRequestManager 類的實(shí)例。然后通過 add_endRequest 方法來綁定 endRequest 事件(異步回發(fā)完成,并且控制權(quán)返回到瀏覽器之后引發(fā))。這樣以后,每次updatepanel發(fā)生回調(diào)后,都會(huì)觸發(fā)EndRequestHandler()函數(shù)。重新綁定一次效果。$(document).ready(function() { reload(); })
失效問題就解決了。
相關(guān)文章
Tab切換組件(選項(xiàng)卡功能)實(shí)例代碼
這篇文章主要介紹了一個(gè)簡單的Tab切換組件實(shí)例,大家可以參考使用2013-11-11基于jQuery實(shí)現(xiàn)表單提交驗(yàn)證
本文給大家分享的是一段基于jQuery的實(shí)現(xiàn)簡單的表單提交驗(yàn)證的代碼,非常簡單實(shí)用,推薦給有相同需求的小伙伴們參考下。2014-11-11基于JQuery的日期聯(lián)動(dòng)實(shí)現(xiàn)代碼
基于JQuery的日期聯(lián)動(dòng)實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-02-02jquery模擬多級(jí)復(fù)選框效果的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query模擬多級(jí)復(fù)選框效果的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06JQuery入門——移除綁定事件unbind方法概述及應(yīng)用
在DOM對(duì)象的實(shí)踐操作中,存在用于綁定事件的bind方法,也會(huì)有相應(yīng)的移除綁定事件unbind方法,接下來將介紹unbind方法的使用,感興趣的朋友可以不要錯(cuò)過了啊,或許本文對(duì)你有所幫助2013-02-02jQuery實(shí)現(xiàn)表格行數(shù)據(jù)滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格行數(shù)據(jù)滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08