Hello,
I am trying to show loading gif image before starting of ajax and hide after its completion but it's not working. can anyone guide me ?
My code is for ajax function:
onSave: function (data) {
$.ajax({
type: "POST",
url: pageUrl + "/GetCapturedImage",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function(){
$('#loading').show()
},
complete: function(){
$('#loading').hide();
},
success: function (r) {
$("[id*=imgCapture]").css("visibility", "visible");
$("[id*=imgCapture]").attr("src", r.d);
},
failure: function (response) {
alert(response.d);
}
});
}
and for HTML:
<div class="loading" id="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="image/ajax-loader.gif" alt="" />
</div>