The best approach to show and hide ajax loader is using beforeSend and success callbacks. you can use async:true
. also if you need to execute a code once an ajax request is finished, use the block inside success callback. that is the main reason for that callback. so you don't have to use async:false
for your ajax calls.
example:
$(document).on('click','.wrapper',function(e){
if ($(e.target).is('#check-notification')){
return;
}
else if ($(e.target).is('.send-email')){
$(this).find('#spinner').fadeIn('fast');
checkConnection("<?php echo site_url('ajax/checkConnection')?>");
}
else{
if ($('.notifications').is(":visible"))
$('.notifications').hide('slow');
}
});
checkConnection = function(url) {
var res = $.ajax(url,{
datatype: 'html',
beforeSend: function() {
$("#loading-image").show();
},
success: function(msg) {
$("#loading-image").hide();
if (msg == "yes"){
var url = '<?php echo site_url("ajax/sendMail"); ?>';
notificationConfirm($(e.target),url);
$(this).find('#spinner').fadeOut('fast');
$(document).trigger('getNotifications');
}
else {
alert('No connection');
}
}
});
};