[英]Assign Ajax Callback function value to a javascript variable
I have a function called getData which makes an ajax request. 我有一个名为getData的函数,该函数发出ajax请求。 I want to use this ajax request result on my form submission for validation along with other validation. 我想在表单提交中使用此ajax请求结果进行验证以及其他验证。 Since ajax is asynchronous i am calling a callback function inside my success function. 由于ajax是异步的,因此我在成功函数中调用了回调函数。
Now i want to assign the callback function value to a javascript variable for my form validation. 现在,我想将回调函数值分配给javascript变量以进行表单验证。 I have tried using jquery validation submit handler method but that doesnt work either. 我尝试过使用jquery验证提交处理程序方法,但这也不起作用。 My callback function is returning the desired output, but when i try to console.log the variable i have assigned it too, it returns undefined 我的回调函数正在返回所需的输出,但是当我尝试console.log我也为其分配了变量时,它返回未定义的
Here is my code 这是我的代码
function getData(cb){
$.ajax({
url:'/stops/reason_valid',
method: 'get',
dataType: "json",
success: function(data) {
if(data.reason == '6'){
if(($('.search_of_item1').is(':checked')) || ($('.search_of_item2').is(':checked'))){
$(".searchValidError").hide();
cb(false);
}
else{
$(".searchValidError").show();
cb(true);
}
}
}
})
}
$(".actionstaken_submit").click(function(e){
var validationFailed = false;
var searchValidation = getData(function(cb){
alert(cb);
return cb;
});
console.log(searchValidation);
if($('.no_validation').is(":checked")){
if($('.action_validation:checked').length > 1){
$('.noneError').show();
validationFailed = true;
}
else{
$('.noneError').hide();
validationFailed = validationFailed || false;
}
}
if (validationFailed || searchValidation) {
e.preventDefault();
return false;
}
});
Note: if i do alert(cb)
display's the appropriate value but console.log(searchValidation)
returns undefined 注意:如果我做alert(cb)
显示的适当的值,但console.log(searchValidation)
返回未定义
....Since ajax is asynchronous i am calling a callback function inside my success function. ....由于ajax是异步的,因此我在成功函数中调用了回调函数。
Right. 对。 But there is an issue. 但是有一个问题。 You continue to fail when you write: 您在编写时继续失败:
var searchValidation = getData(function(cb){
alert(cb);
return cb;
});
console.log(searchValidation);
This is like you are doing the same error: the function is asynchronous as the call. 这就像您在执行相同的错误:函数与调用是异步的。 There is more than one approach to solve your issue. 解决问题的方法不只一种。 I suggest you to consider the jQuery event property isTrigger . 我建议您考虑jQuery事件属性isTrigger 。 When you rise an event with .trigger() the event object contains such a property. 当您使用.trigger()引发事件时,事件对象将包含此类属性。
Hence, you can change your code to: 因此,您可以将代码更改为:
$(".actionstaken_submit").click(function (e) {
if (e.isTrigger !== undefined) { // <-- is event risen from .trigger() ?
return;
}
e.preventDefault();
var validationFailed = false;
if ($('.no_validation').is(":checked")) {
if ($('.action_validation:checked').length > 1) {
$('.noneError').show();
validationFailed = true;
}
else {
$('.noneError').hide();
validationFailed = validationFailed || false;
}
}
getData(function (searchValidation) {
console.log(searchValidation);
if (!(validationFailed || searchValidation)) {
$(".actionstaken_submit").trigger('click'); // <-- raise the event
}
});
});
Another solution can be based on triggering the submit event: 另一个解决方案可以基于触发Submit事件:
$(".actionstaken_submit").closest('form').trigger('submit');
function getData(cb) { cb($(':checkbox').prop('checked')); return; // for debug purposes.... $.ajax({ url: '1.json', method: 'get', dataType: "json", success: function (data) { if (data.reason == '6') { if (($('.search_of_item1').is(':checked')) || ($('.search_of_item2').is(':checked'))) { $(".searchValidError").hide(); cb(false); } else { $(".searchValidError").show(); cb(true); } } else { cb(false); // <------- added..... } } }) } $(".actionstaken_submit").click(function (e) { if (e.isTrigger !== undefined) { // <-- is event risen from .trigger() ? return; } e.preventDefault(); var validationFailed = false; if ($('.no_validation').is(":checked")) { if ($('.action_validation:checked').length > 1) { $('.noneError').show(); validationFailed = true; } else { $('.noneError').hide(); validationFailed = validationFailed || false; } } getData(function (searchValidation) { console.log(searchValidation); if (!(validationFailed || searchValidation)) { $(".actionstaken_submit").trigger('click'); // <-- raise the event } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form > <input type="checkbox"> searchValidation?<br/> <input type="submit" class="actionstaken_submit" value="Submit"> </form>
Hi I change the code on the fly but what you have to do is run the validations of your click event inside a callback, or a deferred method as done or then. 嗨,我即时更改了代码,但您需要做的是在回调中运行click事件的验证,或者在完成后运行延迟的方法。
Example: 例:
function getData(){
return $.ajax({
url:'/stops/reason_valid',
method: 'get',
dataType: "json"
})
}
function validate_submit(e){
var validationFailed = false;
var searchValidation = false;
getData(searchValidation,validationFailed)
.done((data)=>{
console.log(data);
if(data.reason == '6'){
if(($('.search_of_item1').is(':checked')) || ($('.search_of_item2').is(':checked'))){
$(".searchValidError").hide();
}
else{
$(".searchValidError").show();
searchValidation = true;
}
}
}).always(()=>{
console.log(searchValidation);
if($('.no_validation').is(":checked")){
if($('.action_validation:checked').length > 1){
$('.noneError').show();
validationFailed = true;
}
else{
$('.noneError').hide();
validationFailed = validationFailed || false;
}
}
if (validationFailed || searchValidation) {
e.preventDefault();
alert('oh shit here we go again');
return false;
}
})
return false;
}
$(".actionstaken_submit").click(function(e){
validate_submit(e);
});
Hope it helps =) 希望对您有帮助=)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.