¿Cómo saber si hay alguna petición Ajax y Ajax éxito

Question

Me pregunto cómo puedo código que esta

Nota: no voy a codificar una y otra vez en mi cada función petición ajax . lo quiero Genric. de manera que mi script sabe si hay alguna petición ajax hacer $("#loader").css("display","block"); y si hay algún éxito ajax hacer $("#loader").css("display","none");

Answer 1

La cosa mágica que busca es jQuery.ajaxStart() y jQuery.ajaxStop(). También puede encontrar jQuery.ajaxComplete() útil.

Ejemplo:

$("#loader").ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).hide(); 
}); 

usted debe utilizar los métodos hide() y show() en lugar de cambiar el atributo display CSS.

Answer 2

Tome un vistazo a $.ajaxStart y $.ajaxEnd cuando se cablea su aplicación en $ .document (listo):

$.ajaxStart(function(){ 
    $("#loader").css("display", "block"); 
}) 
.ajaxStop(function(){ 
    $("#loader").css("display", "none"); 
}); 

ACTUALIZACIÓN se olvidó de ajaxStop ... @ respuesta de Cory me recordó. Actualizado mi respuesta.

Answer 3

Si desactivas dos o tres llamadas ajax, ajaxStop solo se activará cuando finalice la última.

var isMakingAjaxCall; 

$(document).ready(function() { 

    // Loading Screen for Ajax Calls 
    $("#loader").hide(); 
    $("#loader").ajaxStart(function() { 
     isMakingAjaxCall = true; 
     RepositionLoading(); 
     $("#loader").fadeIn(); 
    }); 
    $("#loader").ajaxStop(function() { 
     $("#loader").fadeOut(); 
     isMakingAjaxCall = false; 
    }); 
}); 

function RepositionLoading() { 
    $("#loader").css('left', "20px"); 
    $("#loader").css('top', "20px"); 
}; 

Answer 4

Estas otras soluciones son grandes pero no estoy seguro de que tratar su preocupación de llamar a sus $("#loader") cambios en CSS inicio y éxito.

puede ser algo como esto:

$(document).ajaxStart(function() { 

    // do something on start 
    $("#loader").css("display","block"); 

}).ajaxError(function(e, xhr, settings) { 
    // do something on error 
    $("#loader").css("display","none"); 

}).ajaxSuccess(function() { 

    // do something on success 
    $("#loader").css("display","block"); 

}); 

Salida este ejemplo funcione correctamente: http://jsbin.com/ocovoq/3/edit#preview