As I implement a basic spinner feedback for a server response to an ajax query, I encounter an issue. I utilize the JQuery .show()
function before initiating the ajax call, and then invoke the .hide()
function within the .always()
callback of the request.
Strangely, the spinner never disappears! I am puzzled by this behavior. Has anyone else faced a similar problem using the .hide()
function in JQuery with a Bootstrap spinner?
For more information on .getJSON()
, visit here. Additionally, you can find more details on the .hide()
and .show()
functions here.
The HTML for my spinner can be found here:
<div id="spinner-map-right-click" class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Here is my JavaScript code:
$('#spinner-map-right-click').show()
$.getJSON({ url: "myurl" })
.done(function(data) {
// performs operations here successfully
})
.fail(function(data) {
// displays error message in case of an error
})
.always(function(data) {
console.log("Hiding")
// although the console log appears, the spinner remains visible
$('#spinner-map-right-click').hide()
});
The ajax request functions properly, the data is retrieved correctly, and the message "Hiding"
is logged as expected. Upon inspecting the code using Firefox, I can see that the <div>
element has been appropriately updated:
<div id="spinner-map-right-click" class="d-flex justify-content-center" style="display: none;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>