jquery - example - Cómo llamar a.ajaxStart() en llamadas ajax específicas

ajaxstart ejemplo

Question

Tengo algunas llamadas ajax en el documento de un sitio que muestra u oculta una barra de progreso dependiendo del estado de AJAX

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

Me gustaría básicamente exagerar 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

Además, si desea deshabilitar las llamadas a .ajaxStart() y .ajaxStop() , puede establecer global opción global en false en sus solicitudes .ajax() ;)

Vea más aquí: Cómo llamar a .ajaxStart () en llamadas ajax específicas

Answer 2

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) {

Answer 3

Lamentablemente, el evento ajaxStart no tiene ninguna información adicional que pueda usar para decidir si mostrar la animación o no.

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. El código puede ser algo así 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 4

Puede vincular el ajaxStart y ajaxStop utilizando un espacio de nombre personalizado:

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

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

Luego, en otras partes del sitio, los desvinculará temporalmente antes de que sus llamadas .json:

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

Entendí la idea desde here mientras buscaba una respuesta.

EDITAR: No he tenido tiempo de probarlo, ¡ay!

Answer 5

Si pones esto en tu función que maneja una acción de ajax, solo se enlazará cuando sea apropiado:

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

Answer 6

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 7

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

Answer 8

Utilice eventos Ajax de ámbito local

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

Answer 9

use beforeSend o complete las funciones de devolución de llamada en la llamada ajax de esta manera ... El ejemplo en vivo está aquí https://.com/a/34940340/5361795

Source ShoutingCode

Answer 10

<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.");
});

Solo revise este ejemplo para obtener una idea. Cuando el usuario hace clic en el elemento con la clase Local y se envía la solicitud Ajax, se muestra el mensaje de registro.