摘要:How to call client-side Javascript function after an UpdatePanel
前言:
經悅君反映,在畫面PostBack後,jQuery和JavaScript會失效,本來以為只是個案問題,因為之前都沒有發生過,所以也不以為意,直到今天才空出時間來查一下這個問題。一開始以為是BasePage在PostBack時沒有將js檔reference進來,後來經過查證js檔是有被參考的,那為何js檔案內的code沒有被執行呢?拜了一下google大神,原來是在UpdatePanel內發生的PostBack並不會讓js檔案內的code被重讀(這種Post Back稱做Asynchronous Post Back<非同步的Post Back>),如果希望在這種情況下叫用JavaScript,大概只能在後端註冊JavaScript,或直接寫在aspx page上而不使用現行的ascx,但如果是使用jQuery的話就很不方便了。
參考資料:
這兩篇提到的解決方法都是在PageRequestManager的EndRequest事件中註冊欲執行的JavaScript
Ex: function load() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler() {
OnReady();
}
<body id="HTMLBody" runat ="server" onload="load()">
Msdn:Sys.WebForms.PageRequestManager 類別
http://msdn.microsoft.com/zh-tw/library/bb311028.aspx
結論:
最後的解決方案,就是在MasterPage的註冊上面的方法,而原來寫在jQuery .ready區塊內的code通通搬到各自的OnReady()方法內(請統一名稱)
Ex:
Before:
$(document).ready(function() {
alert(“hello”);
});
After:
$(document).ready(function() {
OnReady();
});
function OnReady() {
alert(“hello”);
}