小攻城師的戰場筆記

學了一下 jQuery 就躍躍欲試的把它用在目前的系統裡。系統是 ASP.net 開發的，有一個功能是使用者變更密碼，當使用者輸入密碼時要檢查使用者密碼強度。不過問題出現了，按下了「確定修改」的按鈕後，postback 回到原頁面後，以下這段檢查密碼的 jQuery 就不肯動了。

        jQuery(document).ready(function() {
            $j('#txt_NewPass').keyup(function(){
                    $j('#result').html(passwordStrength($j('#txt_NewPass').val(),$j('#txt_OldPass').val()));
                }
            );
        });

找了很久，才發現到是因為網頁中有一塊 updatepanel，裡面放了 CustomValidator，如果使用者沒有輸入正確格式的密碼，就會回到原頁面顯示訊息。因此，按下「確定修改」後，會先檢查僅有 updatepanel 的部分更新，此時整個網頁並沒有 reload，因此無法觸發 jQuery(document).ready() 這一部分的程式。

於是下了關鍵字 "jquery ready 事件 updatepanel" 查了一下，得到這一篇《ASP.NET AJAX Advance Tips & Tricks (5) UpdatePanel 與 jQuery》。

修改後的程式變成這樣，把密碼檢查的部分抽出來寫成一支 function，頁面載入時執行一次。

    <script language="javascript">
        jQuery(document).ready(function() {
            passwdCheck();
        });

        function passwdCheck(){
            var $j = jQuery.noConflict();
            $j('#txt_NewPass').keyup(function(){
                    $j('#result').html(passwordStrength($j('#txt_NewPass').val(),$j('#txt_OldPass').val()));
                }
            );
        }
    </script>

另外為了讓按下「確認送出」後 postback 回原頁面時也能觸發檢查密碼的函式，在網頁上 ScriptManager 之後也做設定，讓 postback 後能觸發密碼檢查函式。

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <script language="javascript">
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(passwdCheck);
    </script>

會寫在 ScriptManager 之後是因為，此時 Sys 物件才產生。如果把這一行和前述的 jQuery 函式一起寫在頁首，會因為 Sys 物件未產生而出現錯誤訊息「Sys 未定義」。