[英]jQuery post function for form validation only allows alert() to show returned data
Okay, so I've tried pretty much everything. 好的,所以我已经尝试了很多东西。
$.post("include/ajax.php", { type: "workbookNumber", wbn: $("input[name='wbn']").val() }, function(data) {
error.push("<li>"+data+"</li>");
alert(data);
});
The error.push is the error array that's been created, it works perfectly but it does not add to the array at all. error.push是已创建的错误数组,它工作正常,但根本不会添加到数组中。 It's as if that line of code does not exist.
好像那行代码不存在。 There have been instances in the comma variable data where there is an extra comma, showing it is there but even so, the
<li></li>
should still show. 在逗号变量数据中有一些实例,其中有一个额外的逗号,显示它存在,但即便如此,
<li></li>
仍应显示。
jQuery.ajax({
type: "POST",
url: "include/ajax.php",
dataType:"html",
data: { type: "workbookNumber", wbn: $("input[name='wbn']").val() },
success:function(response) {
alert(response);
},
error:function (xhr, ajaxOptions, thrownError) {
alert("damn. -_-");
alert(xhr.status);
alert(thrownError);
}
});
I can't think of any reasonable explanation for this, I was thinking that the PHP doesn't have enough time to show the result as it's searching through a database of over 20000 codes however, the result still comes back through the alert, just not through the error array in actual text that can be shown on screen. 我想不出任何合理的解释,我认为PHP没有足够的时间来显示结果,因为它正在搜索超过20000个代码的数据库,但结果仍然通过警报返回,只是不通过可以在屏幕上显示的实际文本中的错误数组。
The error array works fine, it's just this function that doesn't work. 错误数组工作正常,只是这个功能不起作用。 Here's some other examples of what DOES work correctly:
以下是DOES正常工作的其他一些示例:
if($("input[name='fname']").val() == "") {
error.push("<li>The first name field is blank</li>");
}
if($("input[name='lname']").val() == "") {
error.push("<li>The last name field is blank</li>");
}
if($("select[name='usertype']").val() == 0) {
if($("input[name='vcode']").val() == "") {
error.push("<li>The voucher code field is blank</li>");
} else {
$.post("include/ajax.php", { type: "findVoucher", vcode: $("input[name='vcode']").val() }, function(data) {
if(data == "none") {
error.push("<li>The voucher code does not exist</li>");
}
});
}
}
Here's the whole code: 这是整个代码:
$(document).ready(function() {
$("#sit_date").datepicker();
$("select[name='usertype']").change(function() {
if($(this).val()=="0") {
$(".indv").slideUp(500);
$(".comp").slideDown(500);
} else {
$(".indv").slideDown(500);
$(".comp").slideUp(500);
}
});
$("input[name='marka'],input[name='markb']").bind("keypress paste keyup blur focus", function() {
var marka = $("input[name='marka']").val();
var markb = $("input[name='markb']").val();
var perc = (marka/markb)*100;
if(perc>0 && perc<=100) {
$("#per").html(Math.round(perc));
} else {
$("#per").html("");
}
});
$("input[name='vcode']").bind("keypress keyup paste blur focus", function() {
$.post("include/ajax.php", { type: "checkVoucher", vcode: $(this).val() }, function(data) {
$("input[name='group']").val(data);
});
$.post("include/ajax.php", { type: "checkType", vcode: $(this).val() }, function(data) {
$("input[name='certificates']").val(data);
});
});
$("input[name='wbn']").bind("keypress keyup paste blur focus", function() {
$.post("include/ajax.php", { type: "getAssessment", wbn: $(this).val() }, function(data) {
if(data!="") {
$("select[name='assessment']").html(data);
}
});
});
/*
//turn into function
$(document).keyup(function(event){
if(event.keyCode == 13){
alert("works");
$("input[name='manual_add']").click();
}
});
*/
var error = [];
$("input[name='manual_add']").click(function() {
if($("input[name='fname']").val() == "") {
error.push("<li>The first name field is blank</li>");
}
if($("input[name='lname']").val() == "") {
error.push("<li>The last name field is blank</li>");
}
if($("select[name='usertype']").val() == 0) {
if($("input[name='vcode']").val() == "") {
error.push("<li>The voucher code field is blank</li>");
} else {
$.post("include/ajax.php", { type: "findVoucher", vcode: $("input[name='vcode']").val() }, function(data) {
if(data == "none") {
error.push("<li>The voucher code does not exist</li>");
}
});
}
}
if($("input[name='wbn']").val() == "") {
error.push("<li>The workbook number field is blank</li>");
} else {
$.post("include/ajax.php", { type: "workbookNumber", wbn: $("input[name='wbn']").val() }, function(data) {
error.push("<li>"+data+"</li>");
//this is the only thing that works correctly:
alert(data);
});
}
if(($("input[name='questions']").val() == "") && ($("input[name='marka']").val() != $("input[name='markb']").val())) {
error.push("<li>The questions wrong field is blank</li>");
}
var list = "";
$.each(error, function(i,val) {
list += val;
});
if(error.length>0) {
$(".error").slideUp(500);
$(".jquery-error ul").html("").append(list);
$(".jquery-error").slideDown(500);
} else {
$("form").submit();
}
});
});
The var error
is declared in your click()
function and is thus not accessible outside that function. var error
在click()
函数中声明,因此无法在该函数外部访问。 Declare it globally and your code should work. 全局声明它,你的代码应该工作。 (Worked fine for me on jsfiddle with a global
error
variable.) (在jsfiddle上使用全局
error
变量为我工作正常。)
The rest of your error handling code works fine, because it is defined in the same scope as your error
variable (the click()
function). 其余的错误处理代码工作正常,因为它与
error
变量( click()
函数)在同一范围内定义。 But the callback to your ajax request is not executed in the context of your function, but in the window
context. 但是对ajax请求的回调不是在函数的上下文中执行,而是在
window
上下文中执行。 This is definitely a scope issue. 这绝对是一个范围问题。
Of course you have to wait for the response from the server to come back to update your error notifications. 当然,您必须等待服务器的响应才能返回更新错误通知。 Write a function that iterates over the
error
array and displays the corresponding notifications and then call that function from the error
function of your AJAX call. 编写一个迭代
error
数组并显示相应通知的函数,然后从AJAX调用的error
函数中调用该函数。
Try the following: 请尝试以下方法:
var error = [];
jQuery.ajax({
type: "POST",
url: "include/ajax.php",
dataType:"html",
data: { type: "workbookNumber", wbn: $("input[name='wbn']").val() },
success:function(response) {
alert(response);
},
error:function (xhr, ajaxOptions, thrownError) {
error.push("<li>"+thrownError+"</li>");
showErrors();
}
});
function showErrors () {
var list = "";
$.each(error, function(i,val) {
list += val;
});
if(error.length>0) {
$(".error").slideUp(500);
$(".jquery-error ul").html("").append(list);
$(".jquery-error").slideDown(500);
} else {
$("form").submit();
}
}
You need to wait until the ajax function is completed, something like: 你需要等到ajax函数完成,例如:
} else { //use a variable for ajax
var XHR = $.post("include/ajax.php", { type: "workbookNumber", wbn: $("input[name='wbn']").val() }, function(data) {
error.push("<li>"+data+"</li>");
});
}
XHR.always(function() { //make sure ajax is completed and array updated first
var list = "";
$.each(error, function(i,val) {
list += val;
});
if(error.length>0) {
$(".error").slideUp(500);
$(".jquery-error ul").html("").append(list);
$(".jquery-error").slideDown(500);
} else {
$("form").submit();
}
});
Are you sure you are not hiding the global variable error with a local one. 您确定没有使用本地变量隐藏全局变量错误吗? Try using
尝试使用
console.log(data);
console.log(error);
inside your anonymus function and you'll see where your problem is. 在您的匿名函数中,您将看到问题所在。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.