Currently, I am attempting to display a loading div while waiting for an ajax call to finish. Despite experimenting with various methods, I have not been able to consistently achieve the desired outcome.
In my present code, everything functions properly only if I set a breakpoint on the function responsible for showing the div once the ajax request is complete.
var https = 'https://www.googleapis.com/calendar/v3/calendars/';
function HideCheckShowLoading(checkId) {
$("#check_" + checkId).hide('slow', function() {
$("#loading_" + checkId).show('slow');
});
};
function HideLoadingShowCheck(checkId) {
$("#loading_" + checkId).finish().hide('slow', function() {
$("#check_" + checkId).finish().show('slow');
});
};
$(document).ready(function() {
$('#get').click(function() {
HideCheckShowLoading(1);
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function(response) {
//do something
},
error: function() {
//do something else
}
}).done(function() {
HideLoadingShowCheck(1)
});
});
$('#get2').click(function() {
HideLoadingShowCheck(1);
});
});#check_1
{
background-color:red;
}
#loading_1
{
background-color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="check_1">Check</div>
<div hidden id="loading_1">LOADING</div>
<button id="get">Get</button>
<button id="get2">Get2</button>The desired functionality includes:
- Hiding the check div upon button click
- Displaying the loading div
- Performing the ajax call
- If successful, performing an action (reloading the contents of the check div)
- Hiding the loading div
- Showing the check div
Despite trying several methods I found, I keep encountering issues where only the loading div is displayed without further progress. Any help would be greatly appreciated!
Thank you