學了一下 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 未定義」。

 

 

創作者介紹
創作者 fannys23 的頭像
fannys23

小攻城師的戰場筆記

fannys23 發表在 痞客邦 留言(1) 人氣()