I am having an issue where I want to display a loading icon using CSS on my page when a user sends data via ajax, and then remove this loading icon once the ajax call is complete. The strange thing is that the page successfully shows the icon the first time, but it does not show again without a page refresh. However, the ajax call is being completed successfully for multiple calls. Here is the code snippet:
Relevant Html:
<head>
<link rel="stylesheet" href="~/Content/Loading.css" type="text/css" id="loading_gif"/>
</head>
...
...
<button type="button" class="btn btn-success" id="button">Import</button>
...
...
<div class="modal"><!-- Placed at bottom of page --></div>
Ajax:
$(document).ready(function () {
$('#button').click(function () {
$.ajax({
type: "POST",
url: '@Url.Action("Submit")',
data: {
//submit data via jQuery
},
dataType: 'json',
beforeSend: function() {
$body.addClass("loading");
},
success: function (data) {
//render a partialView
},
complete: function () {
$body.removeClass("loading");
}
});
});
}(jQuery));
CSS:
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 128, 128, 128, .5 ) url('../img/ajax-loader-bar.gif') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}