Cómo llamar .ajaxStart() en ajax específica llama

Question

Tengo algunas llamadas ajax en el documento de un sitio que mostrar u ocultar una barra de progreso en función del estado ajax

$(document).ajaxStart(function(){ 
     $('#ajaxProgress').show(); 
    }); 
    $(document).ajaxStop(function(){ 
     $('#ajaxProgress').hide(); 
    }); 

quisiera básicamente overwirte estos métodos en otras partes del sitio donde se realizan muchas llamadas ajax pequeñas y rápidas y no es necesario que la barra de progreso entre y salga. Estoy intentando adjuntarlos o insertarlos en otras llamadas $ .getJSON y $ .ajax. He intentado encadenarlos, pero aparentemente eso no es bueno.

$.getJSON().ajaxStart(function(){ 'kill preloader'}); 

Answer 1

Puede obligar a la ajaxStart y ajaxStop utilizando espacio de nombres personalizado:

$(document).bind("ajaxStart.mine", function() { 
    $('#ajaxProgress').show(); 
}); 

$(document).bind("ajaxStop.mine", function() { 
    $('#ajaxProgress').hide(); 
}); 

Entonces, en otras partes del sitio que va a compromiso.Por temporalmente antes de su .json llama:

$(document).unbind(".mine"); 

tomó la idea de here durante la búsqueda de una respuesta.

EDIT: No he tenido tiempo para probarlo, por desgracia.

Answer 2

Desafortunadamente, ajaxStart caso no tiene ninguna información adicional que se puede utilizar para decidir si desea mostrar o no la animación.

De todos modos, aquí hay una idea. En su método ajaxStart, ¿por qué no iniciar la animación después de decir 200 milisegundos? Si las solicitudes ajax se completan en 200 milisegundos, no se mostrará ninguna animación, de lo contrario, se mostrará la animación. Código puede ser algo como:

var animationController = function animationController() 
{ 
    var timeout = null; 
    var delayBy = 200; //Number of milliseconds to wait before ajax animation starts. 

    var pub = {}; 

    var actualAnimationStart = function actualAnimationStart() 
    { 
     $('#ajaxProgress').show(); 
    }; 

    var actualAnimationStop = function actualAnimationStop() 
    { 
     $('#ajaxProgress').hide(); 
    }; 

    pub.startAnimation = function animationController$startAnimation() 
    { 
     timeout = setTimeout(actualAnimationStart, delayBy); 
    }; 

    pub.stopAnimation = function animationController$stopAnimation() 
    { 
     //If ajax call finishes before the timeout occurs, we wouldn't have 
     //shown any animation. 
     clearTimeout(timeout); 
     actualAnimationStop(); 
    } 

    return pub; 
}(); 


$(document).ready(
    function() 
    { 
     $(document).ajaxStart(animationController.startAnimation); 
     $(document).ajaxStop(animationController.stopAnimation); 
    } 
); 

Answer 3

si se pone esto en su función que se encarga de una acción que va a Ajax sólo se unen a sí mismo cuando sea apropiado:

$('#yourDiv') 
    .ajaxStart(function(){ 
     $("ResultsDiv").hide(); 
     $(this).show(); 
    }) 
    .ajaxStop(function(){ 
     $(this).hide(); 
     $(this).unbind("ajaxStart"); 
    }); 

Answer 4

Por otra parte, si quieres desactivar llamadas a .ajaxStart() y .ajaxStop(), se puede establecer global opción de false en sus peticiones .ajax();)

Ver más aquí: How to call .ajaxStart() on specific ajax calls

Answer 5

Utilice ajaxSend y ajaxComplete si desea intercalar la solicitud antes de decidir qué hacer. Véase mi respuesta aquí: https://stackoverflow.com/a/15763341/117268

Answer 6

<div class="Local">Trigger</div> 

<div class="result"></div> 
<div class="log"></div> 

$(document).ajaxStart(function() { 
$("log")text("Trigger Fire successfully."); 
}); 

$(".local").click(function() { 
$(".result").load("c:/refresh.html."); 
}); 

sólo tiene que ir a través de este ejemplo, usted consigue un poco de idea.When el usuario hace clic en el elemento con la clase local y la solicitud se envía Ajax, se muestra el mensaje de registro.

Answer 7

Tengo una solución. Configuré una variable global js llamada showloader (establecida como falsa por defecto). En cualquiera de las funciones que desea mostrar, el cargador simplemente lo configura en verdadero antes de realizar la llamada ajax.

function doAjaxThing() 
{ 
    showloader=true; 
    $.ajax({yaddayadda}); 
} 

Luego tengo lo siguiente en mi sección de la cabeza;

$(document).ajaxStart(function() 
{ 
    if (showloader) 
    { 
     $('.loadingholder').fadeIn(200); 
    } 
});  

$(document).ajaxComplete(function() 
{ 
    $('.loadingholder').fadeOut(200); 
    showloader=false; 
}); 

Answer 8

uso funciones de devolución de llamada Ajax completos en esta forma como beforeSend o ..... Ejemplo vivo es aquí https://stackoverflow.com/a/34940340/5361795

Fuente ShoutingCode

Answer 9

uso de ámbito Ajax eventos locales

   success: function (jQxhr, errorCode, errorThrown) { 
        alert("Error : " + errorThrown); 
       }, 
       beforeSend: function() { 
        $("#loading-image").show(); 
       }, 
       complete: function() { 
        $("#loading-image").hide(); 
       } 

Answer 10

Hay un atributo en el objeto de opciones .ajax() toma llamada global.

Si se establece en falso, no activará el evento ajaxStart para la llamada.

$.ajax({ 
     url: "google.com", 
     type: "GET", 
     dataType: "json", 
     cache: false, 
     global: false, 
     success: function (data) {