Clash Royale CLAN TAG

Ajax callback is firing after function call

Hi Have a ajax call in a function thats called on date input change event to check if a date is already in use for User. the success in the Ajax call fires after the click function is finished.

How do I get the success results and continue on with the #datepicker change funtion as I need the json results for rest of function.

controller

public ActionResult IsDateAvailable(DateTime date, int Id) {

var dateAvailable = !(_context.Trading.Any(t => t.uId == Id && t.TradingDate == date));

if (!(dateAvailable)) {
return Json(new {
status = false, msg = "This date already exists."
});
}

return Json(new {
status = true
});
}


JavaScript

$(document).ready(function() {
var message;
var isDateValid;

function CheckDate(para) {
var dateValid;
var mesg;

return $.ajax({
url: '@Url.Action("IsDateAvailable", "Trading")',
type: "GET",
data: para,
dataType: "json",
success: function(data) {
if (!(data.status)) {
message = data.msg;
} else {
isDateValid = true;
}
},
error: function(xhr, httpStatusMessage) {
alert(xhr + httpStatusMessage);
}
});
}

$("#datePicker").change(function() {
$("#alert").css({
'display': 'none'
});

if (Id == 0) {
$("#alert").attr('class', 'alert alert-danger');
$("#alert").text('Please select a User.');
$("#alert").show();

return false;
}

var date = $(this).val();

var para = {
date: date,
Id: Id
};
CheckDate(para);

if (isDateValid) {
$("#btnAdd").show();
} else {
$("#btnAdd").css({
'display': 'none'
});
$("#alert").attr('class', 'alert alert-danger');
$("#alert").text(message);
$("#alert").show();
}

});
});


resolve

success

2 Answers
2

You should turn to being asynchronous. change your code to match with these:

.
.
.
function CheckDate(para) {
return new Promise((resolve, reject) => {
return $.ajax({
url: '@Url.Action("IsDateAvailable", "Trading")',
type: "GET",
data: para,
dataType: "json",
success: function(data) {
if (!(data.status)) {
message = data.msg;
} else {
isDateValid = true;
}
resolve();
},
error: function(xhr, httpStatusMessage) {
alert(xhr + httpStatusMessage);
reject();
}
});
}
.
.
.
checkDate(para).then(res => {
if (isDateValid) {
$("#btnAdd").show();
} else {
$("#btnAdd").css({
'display': 'none'
});
$("#alert").attr('class', 'alert alert-danger');
$("#alert").text(message);
$("#alert").show();
}
}).catch(err => { /* do something */ });


You just need to set async: false inside your ajax request. You can also remove the word return from the CheckDate, because of it's redundant:

async: false

function CheckDate(para) {
var dateValid;
var mesg;

$.ajax({
url: '@Url.Action("IsDateAvailable", "Trading")',
async: false,
type: "GET",
data: para,
dataType: "json",
success: function(data) {
if (!(data.status)) {
message = data.msg;
} else {
isDateValid = true;
}
},
error: function(xhr, httpStatusMessage) {
alert(xhr + httpStatusMessage);
}
});
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.