2012-07-07 106 views
0

我在兩個不同的頁面上有兩個幾乎相同的表單,它們接受用戶的姓名和電子郵件地址。當我按下提交按鈕時,他們都會調用一個驗證器,它可以正常工作,然後兩者都應該進行Ajax調用並顯示結果。此時,其中一個成功地打電話,另一個只刷新頁面。我不確定有什麼不同,導致一個人成功工作,另一個失敗。有了這個工作,我已經有了一個工作表單,這是我通過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> 

響應是顯示來自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(!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層。那麼爲什麼最底層的頁面刷新頁面而不是進行Ajax調用,而第一個頁面完全正常工作呢?

+0

如果您在錯誤頁面中註釋了額外的代碼,那麼它是否與以前的代碼一樣正常工作? – 2012-07-20 10:33:17

+0

這已經被分成了2個硬編碼模式,我只是簡單地使用php根據用戶是否登錄來決定使用哪一個,所以現在我不再需要動態生成表單的內容。 – jaimerump 2012-07-20 14:22:53

回答

1

如何評論那些return false語句在第二個ajax成功回調函數?

相關問題