Whenever a button on my website is clicked, new content is loaded via ajax. To indicate that the content is being loaded, I created a div that contains a loading wheel graphic. In the function assigned to the button click event, I first add a class to the div to display the loading wheel, then load the content, and finally remove the loading wheel class. However, this process doesn't seem to be working as intended because the loading wheel does not appear at all. I even attempted to pause the JavaScript execution for a second before removing the loading wheel class, but the issue persists. For those interested in seeing a functional example, please refer to the jsfiddle link provided: http://jsfiddle.net/g8np7qLa/
Below is the corresponding JavaScript code:
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
function show_loader(){
$("#loader").addClass("loader");
event.preventDefault();
}
function hide_loader(){
$("#loader").removeClass("loader");
event.preventDefault();
}
if($(".item-button").length) {
$(".item-button").click(function(event) {
show_loader();
//load the ajax data
wait(1000);
hide_loader();
event.preventDefault();
});
}