I am trying to show ajax-loader.gif while data is loading, and after data is loaded completely, hide it.
Code update
:
$.ajax({
type: "POST",
dataType: 'json',
url: "api/Employee/GetData",
beforeSend: function () {
// before send, show the loading gif
$('#wait').show();
},
success: function (msg) {
$.getJSON(uri).done(function (data) {
$.each(msg, function (key, item) {
// alert(item);
$('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
});
});
/* or simply put here each statement inside callback like so
$.each( msg, function (key, item) {
// alert(item);
$('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
});
*/
// or just hide here on success
$('#wait').hide();
},
complete: function () {
// or hide here
// this callback called either success or failed
$('#wait').hide();
}
}).done(function (data) {
$.each(data, function (key, item) {
// alert(item);
$('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
});
});
According to some answers, Ajax has start and stop functions as shown here:
$('#wait').ajaxStart(function() {
$(this).show();
}).ajaxComplete(function() {
$(this).hide();
});
My question is how to combine both codes in order to show and hide ajax-loader.gif?