JQuery：重新打開模態彈出框

Question

我在傳統的ASP頁面上有一個JQuery模式彈出窗體。它設置爲用戶點擊鏈接打開表單。他們輸入他們的電子郵件地址，並提交表格。我想要做的是檢查電子郵件是否在我的數據庫中，如果不是，請重新加載帶有錯誤消息的模態彈出窗體。

表單工作正常，但我不確定如何在沒有設置另一個彈出窗口的情況下找不到該電子郵件地址時再次彈出窗體。我只是開始JQuery，所以很抱歉，如果這是一個簡單的問題。我環顧四周，但沒有找到任何這方面的例子。

這裏是jQuery代碼：

<script type="text/javascript"> 
    $(function() { 

     //Modal pop-up form 
     // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! 
     $("#dialog:ui-dialog").dialog("destroy"); 

     var email = $("#email"), 
       allFields = $([]).add(email); 
       tips = $(".validateTips"); 

     function updateTips(t) { 
      tips 
        .text(t) 
        .addClass("ui-state-highlight"); 
      setTimeout(function() { 
       tips.removeClass("ui-state-highlight", 1500); 
      }, 500); 
     } 

     function checkLength(o, n, min, max) { 
      if (o.val().length > max || o.val().length < min) { 
       o.addClass("ui-state-error"); 
       updateTips("Length of " + n + " must be between " + 
         min + " and " + max + "."); 
       return false; 
      } else { 
       return true; 
      } 
     } 

     function checkRegexp(o, regexp, n) { 
      if (!(regexp.test(o.val()))) { 
       o.addClass("ui-state-error"); 
       updateTips(n); 
       return false; 
      } else { 
       return true; 
      } 
     } 

     $("#dialog-form").dialog({ 
      autoOpen: false, 
      height: 350, 
      width: 350, 
      modal: true, 
      buttons: { 
       "Send Login": function() { 
        var bValid = true; 
        allFields.removeClass("ui-state-error"); 

        bValid = bValid && checkLength(email, "email", 5, 80); 

        // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ 
        bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Please enter a valid email address."); 

        if (bValid) { 
         $("#users tbody").append("<tr>" + 
           "<td>" + email.val() + "</td>" + 
          "</tr>"); 
         $(this).dialog("close"); 
         $("form[name='modalPopup']").submit() 
        } 

       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      }, 
      close: function() { 
       allFields.val("").removeClass("ui-state-error"); 
      } 
     }); 

     $("#send-password") 

       .click(function() { 
        $("#dialog-form").dialog("open"); 
       }); 


    }); 
</script> 

這裏是打開的形式鏈接：

<strong>Forgot your login?:</strong> <a href="#" id="send-password">click here</a></p> 

而這裏的形式：

<div id="dialog-form" title="Send My Login"> 
     Enter the email address associated with your account. Your password will be sent to you. 
     <br /> 
     <strong>If you do not have an email address</strong>, or do not 
     remember it, please contact your Human Resources department to have your login 
     provided to you. 

     <p class="validateTips"></p> 

     <form action="SendLogin.asp" method="Post" name="modalPopup"> 
     <fieldset> 

      <label for="email">Email</label> 
      <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> 

     </fieldset> 
     </form> 
    </div> 

非常感謝您的幫助！

Answer 1

好了，我能夠實現我在​​評論上述目標。我添加了一個JavaScript的查詢字符串函數：

function getQuerystring(key, default_) { 
     if (default_ == null) default_ = ""; 
     key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 
     var regex = new RegExp("[\\?&]" + key + "=([^&#]*)"); 
     var qs = regex.exec(window.location.href); 
     if (qs == null) 
      return default_; 
     else 
      return qs[1]; 
    } 

然後調用它在我的彈出參數：所以現在它會autoOpen如果查詢字符串是「真」，否則會被

$("#dialog-form").dialog({ 
      autoOpen: getQuerystring('loginform'), 
      height: 350, 
      width: 350, 
      modal: true,..... 

「假」並且只在點擊時打開。這應該適用於我，但如果有更多經驗豐富的成員有更好的建議，我很樂意傾聽。

Answer 2

是否有特別的原因讓你首先關閉對話框？

我做的是保持對話開放，做$.post()

背景請求，以便您的按鈕處理程序將成爲這樣的事情：

if (bValid) { 
    $("#users tbody").append("<tr>" + 
      "<td>" + email.val() + "</td>" + 
     "</tr>"); 

    $.post('SendLogin.asp',$("form[name='modalPopup']").serialize(),function(data){ 
     if (data.success) 
     { 
      $(this).dialog("close"); 

      // do some further action.. 

     } 
     else 
     { 
      // tell the user about the problem 
     } 
    }, 'json'); 


} 

注：我傳遞「JSON '作爲$.post()的第四個參數。這會將響應處理程序中的參數data自動轉換爲js對象，但它顯然希望從服務器返回一些json數據。你可能需要適應這個經典的asp。注2：Firebug是你的ajax請求調試的朋友！

你可以閱讀這裏使用的功能：

• serialize
• $.post