Currently, I am facing an issue with a JavaScript function that triggers an AJAX call to fetch some data when there is a change in a select list event.
I have experimented with various methods to display a loader while the data is being fetched, as the current situation where the select list pauses doesn't look appealing to customers.
However, regardless of how I attempt to display the loader, it always appears after the AJAX call has completed. Here's the snippet of my current code:
<select name="addresslist" class="form-select" id="edit-addresslist" onchange="selectAddress(this)">
<option value="none">-- Please select an address from the list below --</option>
//additional options are not relevant here
</select>
JS File
function selectAddress(data) {
var loader = document.getElementbyId('overlay-loader');
var selectedAddress = data.value;
var uprn = selectedAddress.split(',')[1];
loader.style.display = "block";
$.ajax({
url: '~/collectiondates',
async: false,
data: {
uprn: uprn
},
success: function (data) {
result = data;
}
Despite trying different approaches such as calling a separate function on the "onchange" event or within selectAddress, none seem to work as the AJAX function always completes first before displaying the loader, leading to an unnecessary delay.
Fortunately, the rest of my code functions properly as intended apart from this loading issue.
Any insights or suggestions would be greatly appreciated. Thank you.