Currently, I have implemented a preloader gif for my ajax requests using the following code snippet:
$(document).ajaxStart(function () {
var position = $('#parentDiv').position();
position.left += (($('#parentDiv').width() / 2) - ($('#bigPreloader').width() / 2));
position.top += (($('#parentDiv').height() / 2) - ($('#bigPreloader').height() / 2));
$('#bigPreloader').css(position).show();
$('#bigPreloader').show();
}).ajaxStop(function () {
$('#bigPreloader').hide();
});
The #parentDiv section occupies most of the page, with the preloader being 250x250 pixels and centered within #parentDiv.
Although this setup works well, I now have additional ajax calls that are related to specific inputs, rather than the entire page. For these instances, I intend to use a smaller preloader (14x14 pixels) placed inside the respective input field itself.
Is there a method within ajaxStart to identify which ajax call was triggered? Alternatively, can multiple ajaxStart events be assigned to specific elements?
SOLUTION
$(document).ajaxSend(function (event, jqxhr, settings) {
if (settings.url.indexOf('LoadInputData') == -1) {
var position = $('#parentDiv').position();
position.left += (($('#parentDiv').width() / 2) - ($('#bigPreloader').width() / 2));
position.top += (($('#parentDiv').height() / 2) - ($('#bigPreloader').height() / 2));
$('#bigPreloader').css(position).show();
$('#bigPreloader').show();
} else {
$('#inputLoad').removeClass('notActive').addClass('isActive');
}
}).ajaxStop(function () {
if ($('#bigPreloader').is(':visible')) {
$('#bigPreloader').hide();
} else {
$('#inputLoad').removeClass('isActive').addClass('notActive');
}
});