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

[OK]を、ので、私は上記のコメントで説明した目標を達成することができました。私は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]; 
    } 

そして、私のポップアップパラメータでそれを呼び出す：

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

だから今、それはautoOpenクエリ文字列が「真」であれば、そうでない場合は「偽」になりますクリックすると表示されます。これは私にとってはうまくいくはずですが、経験豊富なメンバーにアドバイスがあれば喜んで聞きます。

Answer 2

最初にダイアログを閉じる特別な理由はありますか？

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()

でバックグラウンド要求を行うだからあなたのボタンのハンドラがそのようなものになるで'を$.post()の4番目のパラメータとして使用します。これにより、レスポンスハンドラの引数dataが自動的にjsオブジェクトに変換されますが、明らかにサーバーからのjsonデータが返されることが予想されます。あなたは、古典的なASPで動作するようにこれを適応させる必要があります。

注2：Firebugは、デバッグのためのajaxリクエストの友人です！

あなたはここで使用される機能について読むことができます。

• serialize
• $.post