我在兩個不同的頁面上有兩個幾乎相同的表單,它們接受用戶的姓名和電子郵件地址。當我按下提交按鈕時,他們都會調用一個驗證器,它可以正常工作,然後兩者都應該進行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調用,而第一個頁面完全正常工作呢?
如果您在錯誤頁面中註釋了額外的代碼,那麼它是否與以前的代碼一樣正常工作? – 2012-07-20 10:33:17
這已經被分成了2個硬編碼模式,我只是簡單地使用php根據用戶是否登錄來決定使用哪一個,所以現在我不再需要動態生成表單的內容。 – jaimerump 2012-07-20 14:22:53