How to call client-side Javascript function after an UpdatePanel asychronous (Ajax) request is over

摘要:How to call client-side Javascript function after an UpdatePanel

前言:

        經悅君反映,在畫面PostBack後,jQueryJavaScript會失效,本來以為只是個案問題,因為之前都沒有發生過,所以也不以為意,直到今天才空出時間來查一下這個問題。一開始以為是BasePagePostBack時沒有將jsreference進來,後來經過查證js檔是有被參考的,那為何js檔案內的code沒有被執行呢?拜了一下google大神,原來是在UpdatePanel內發生的PostBack不會js檔案內的code被重讀(這種Post Back稱做Asynchronous Post Back<非同步的Post Back>),如果希望在這種情況下叫用JavaScript,大概只能在後端註冊JavaScript,或直接寫在aspx page上而不使用現行的ascx,但如果是使用jQuery的話就很不方便了。

 

參考資料:

 

http://imak47.wordpress.com/2008/10/18/jquery-effects-not-working-after-updatepanel-asynchronous-request-is-over/

http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/

 

這兩篇提到的解決方法都是在PageRequestManagerEndRequest事件中註冊欲執行的JavaScript

 

Ex: function load() {

            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    }

      function EndRequestHandler() {

            OnReady();

    }

 

<body id="HTMLBody" runat ="server" onload="load()">

 

MsdnSys.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”);

}