0

ユーザーの名前と電子メール アドレスを取得する 2 つの異なるページに、ほぼ同じフォームが 2 つあります。送信ボタンを押すと、両方とも正しく機能するバリデーターを呼び出し、両方とも Ajax 呼び出しを行って結果を表示することになっています。この時点で、そのうちの 1 つは呼び出しに成功し、もう 1 つはページを更新するだけです。一方が正常に機能し、もう一方が失敗する原因となる違いが何であるかはわかりません。機能するものでは、機能するフォームですでにこの問題が発生しました。これは、JavaScriptを使用してフォームを生成したことが原因でした。何が原因なのか、今となってはわかりません。機能するもののインラインコードは次のとおりです。

<!--// MODAL: INVITE //-->
<div id="inviteModal" class="modal" style="display: none">
   <div class="response"></div>
   <form id="inviteForm" >
   <script type="text/javascript" src="/includes/js/jquery-1.7.2.min.js"></script>
   <script type="text/javascript">
     var invites = <?php echo $user->getInvitesLeft(); ?>;
   </script>
   </form>
</div>

Response は、Ajax 呼び出しからの応答を表示する場所です。招待の値に応じて異なるアクションを実行するため、後で Javascript を使用してコンテンツを生成する必要があります。私はもともと全体を生成していましたが、初めてリフレッシュの問題を防ぐためにフォームタグを配置する必要があることがわかりました. ユーザーに表示されるフォームを生成するコードは次のとおりです。

if(invites < 1){
        $("#inviteModal").html("You have no invites left. You can get more by increasing your score.");
    }
    else{
        $("#inviteForm").html("<h2>Please enter the specified information for the friend you wish to invite. </h2>"+
       "<p>First: <input type=\"text\" name=\"first\"></p>"+
       "<p>Last: <input type=\"text\" name=\"last\"></p>"+
       "<p>Email: <input type=\"text\" name=\"email\"></p>"+
       "<p><input type=\"submit\" name=\"submit\" value=\"Invite\"></p>");
    }
    $("#inviteModal").css('display', "block");
    $("#overlay").css("display", "block");

バリデータ関数は次のとおりです。

$("#inviteForm").validate({
//Rules for invite validation
rules: {
            first: "required",
            email: {
                required: true,
                email: true
            }
        },
//Messages to print if validation fails
messages: {
            first: "Please provide your friend's name.",
            email: "We cannot contact your friend without a valid email address.",
        },
//What to do when validation succeeds
submitHandler: function(form) {
            //Form is valid, make Ajax call
            $.ajax({
            type: "POST",
            url: '/invite/process',
            data: $("#inviteForm").serialize(),
            datatype: "html",
            success: function(data, textStatus ,XHR) {
                //alert(data);

                if(data.indexOf("Thank you") >= 0 ){
                    $("#inviteModal .response").text(data);
                    invites -=1;
                }
                else{
                    $("#inviteModal .response").text(data);
                }
            }
            }); //End ajax
        } //End submitHandler
}); //End validator

私が言ったように、これは完全にうまく機能します。これと更新されるものとの唯一の違いは、機能していないものはログインする必要のないページにあり、ユーザーがログインしているかどうかに応じて異なるアクションを実行することです.インラインコードは次のとおりです。

<!--// MODAL: INVITE //-->
<div id="inviteModal" class="modal" style="display: none">
<div class="response"></div>
<form id="inviteForm" >
<script type="text/javascript" src="/includes/js/jquery-1.7.2.min.js"></script>
<?php 
if(!$user || $user == null){ //No user logged in, display invite request form instead 
   $loggedin = false;
}
else{ //Allow user to invite friends
   $loggedin = true; 
}  
?>
</form>

生成コードは次のとおりです。if レイヤーが 1 つ追加されていることを除いて、ほぼ同じです。

if(!loggedin){
        $("#inviteForm").html("<h2>Please enter the specified information to request an invitation. </h2>"+
           "<p>First: <input type=\"text\" name=\"first\"></p>"+
           "<p>Last: <input type=\"text\" name=\"last\"></p>"+
           "<p>Email: <input type=\"text\" name=\"email\"></p>"+
           "<p><input type=\"submit\" name=\"submit\" value=\"Invite\"></p>");
    }
else{
        invites = <?php echo $user->getInvitesLeft(); ?>;
        if(invites < 1){
            $("#inviteModal").html("You have no invites left. You can get more by increasing your score.");
        }
        else{
            $("#inviteForm").html("<h2>Please enter the specified information for the friend you wish to invite. </h2>"+
           "<p>First: <input type=\"text\" name=\"first\"></p>"+
           "<p>Last: <input type=\"text\" name=\"last\"></p>"+
           "<p>Email: <input type=\"text\" name=\"email\"></p>"+
           "<p><input type=\"submit\" name=\"submit\" value=\"Invite\"></p>");
        }
    }
    $("#inviteModal").css('display', "block");
    $("#overlay").css("display", "block");

そして、ここにバリデータがあります：

$("#inviteForm").validate({
//Rules for invite validation
rules: {
            first: "required",
            email: {
                required: true,
                email: true
            }
        },
//Messages to print if validation fails
messages: {
            first: "Please provide your friend's name.",
            email: "We cannot contact your friend without a valid email address.",
        },
//What to do when validation succeeds
submitHandler: function(form) {
            //Form is valid, make Ajax call
            if(loggedIn){   //They are inviting a friend
                $.ajax({
                    type: "POST",
                    url: '/invite/process',
                    data: $("#inviteForm").serialize(),
                    datatype: "html",
                    success: function(data, textStatus ,XHR) {
                        //alert(data);

                        if(data.indexOf("Thank you") >= 0 ){
                            $("#inviteModal .response").text(data);
                            invites -=1;
                            //$("#overlay").css("display", "none");
                            //$("#inviteModal").fadeOut(5000);
                        }
                        else{
                            $("#inviteModal .response").text(data);
                        }
                        return false;
                    }
                }); //End Ajax
            }
            else{ //They are requesting an invite for theirself
                $.ajax({
                    type: "POST",
                    url: '/invite/request',
                    data: $("#inviteForm").serialize(),
                    datatype: "html",
                    success: function(data, textStatus ,XHR) {
                        //alert(data);

                        $("#inviteModal .response").text(data);

                        return false;
                    }
                }); //End ajax
            }
                            return false;
        } //End submitHandler
}); //End validate

ここでも、if の追加レイヤーが 1 つあることを除いて、ほぼ同じです。では、最初の呼び出しが完全に正常に機能しているのに、なぜ一番下の呼び出しが Ajax 呼び出しを行う代わりにページを更新するのでしょうか?

4

1 に答える 1

1

return false2 番目の ajax 成功コールバック関数でこれらのステートメントをコメントアウトするのはどうですか?

于 2012-07-20T08:58:16.620 に答える