The following 2 methods check if someone is available for each day within a date range. I have 2 variables, one that counts the total days between each date (dayCount) and the other increases when the person is available for the given date (validDays).
If the 2 variables are not equal, an error message is presented saying they are not available.
The checkAvailable() function calls the setAvailable() function which in turn makes an AJAX call to check the availability for the person on a date. The AJAX call returns true/false. This works and returns the correct value.
The issue I am having is I have to click the button twice for the dayCount and validDays to have the correct values. For example if I select a PM booking, I know PM the person is available. The first time I press the button it says Unavailable, the second and every time after it says available.
I thought the issue was the async didn't finish before making the comparison of the 2 variables, but after adding in some pauses to check, that doesn't seem to be the case.
Javascript code -
var validDays = 0;
function checkAvailable() {
event.preventDefault();
var teacher = $("#selectedTeacher").val();
var startDate = new Date($("#startDate").val());
var endDate = new Date($("#endDate").val());
var dayCount = 0;
// loop for every day
for (var day = startDate; day <= endDate; day.setDate(day.getDate() + 1)) {
console.log('date: ' + day);
var duration;
var starttime;
var endtime;
var dayOfWeek = day.getDay();
var monday = document.getElementById('enableMon');
var tuesday = document.getElementById('enableTue');
var wednesday = document.getElementById('enableWed');
var thursday = document.getElementById('enableThu');
var friday = document.getElementById('enableFri');
if (dayOfWeek == "1" && monday.checked) {
duration = $("#DurationMonday").val();
starttime = $("#startTimeMon").val();
endtime = $("#endTimeMon").val();
console.log('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
setAvailable(teacher, day, duration);
dayCount = dayCount + 1;
console.log('Day count is now - ' + dayCount + '. Valid days are - ' + validDays);
}
else if (dayOfWeek == "2" && tuesday.checked) {
duration = $("#DurationTuesday").val();
starttime = $("#startTimeTue").val();
endtime = $("#endTimeTue").val();
console.log('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
setAvailable(teacher, day, duration);
dayCount = dayCount + 1;
console.log('Day count is now - ' + dayCount + '. Valid days are - ' + validDays);
}
else if (dayOfWeek == "3" && wednesday.checked) {
duration = $("#DurationWednesday").val();
starttime = $("#startTimeWed").val();
endtime = $("#endTimeWed").val();
console.log('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
setAvailable(teacher, day, duration);
dayCount = dayCount + 1;
console.log('Day count is now - ' + dayCount + '. Valid days are - ' + validDays);
}
else if (dayOfWeek == "4" && thursday.checked) {
duration = $("#DurationThursday").val();
starttime = $("#startTimeThu").val();
endtime = $("#endTimeThu").val();
console.log('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
setAvailable(teacher, day, duration);
dayCount = dayCount + 1;
console.log('Day count is now - ' + dayCount + '. Valid days are - ' + validDays);
}
else if (dayOfWeek == "5" && friday.checked) {
duration = $("#DurationFriday").val();
starttime = $("#startTimeFri").val();
endtime = $("#endTimeFri").val();
console.log('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
setAvailable(teacher, day, duration);
dayCount = dayCount + 1;
console.log('Day count is now - ' + dayCount + '. Valid days are - ' + validDays);
}
}
if(dayCount == validDays)
{
toastNotifySuccess("Available", 2000);
$("#btnSave").attr('disabled', false);
}
else
{
toastNotifyError("The selected teacher is not available", 2000);
$("#btnSave").attr('disabled', true);
}
dayCount = 0;
validDays = 0;
};
async function setAvailable(teacher, day, duration) {
return await $.ajax({
url: '/Availability/CheckAvailabilityForDate?teacher=' + teacher + '&date=' + day.toISOString() + '&duration=' + duration,
type: 'POST',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (response) {
if (response == false) {
}
else if(response == true) {
console.log('add 1 to valid days - ' + validDays);
validDays = validDays + 1;
console.log('added 1 to valid days - ' + validDays);
}
}
});
};
MVC
[HttpPost]
public async Task<string> CheckAvailabilityForDate(int teacher, DateTime date, BookingDuration duration, DateTime startTime, DateTime endTime)
{
bool available = true;
available = await _availabilityService.CheckAvailable(date, teacher, duration, startTime, endTime, null);
return JsonSerializer.Serialize(available);
}
You forgot to use await. Without it, you start the request, but don't wait for the result. If you run the method second the time, the request is probably done, and you see the correct validDays.
async function checkAvailable { // notice async keyword
...
await setAvailable(teacher, day, duration); // notice await keyword
...
}