Targeting di chiamate Ajax specifiche che incorporano AjaxStart/Stop

Question

Sto tentando di visualizzare uno spinner di caricamento durante le chiamate Ajax sulla mia pagina. Voglio scegliere come target diverse chiamate Ajax e mostrare diversi spinners. Allo stato attuale, come ajaxStart è un evento globale, tutte le chiamate ajax finiscono per mostrare tutti gli spinners allo stesso tempo.

Questo funziona ... aggiunge la classe "carica" ​​a un div nascosto contenente lo spinner e lo visualizza.

$(document).bind("ajaxStart", function() { 
    $body.addClass("loading"); 
}); 

$(document).bind("ajaxStop", function() { 
    $body.removeClass("loading"); 
}); 

Ora da altre risposte pila ho visto che è possibile aggiungere spazi dei nomi a ajaxstart/stop (jQuery should I use multiple ajaxStart/ajaxStop handling)

...... lungo le linee di

$(document).bind("ajaxStart.secondCall", function() { 
    $body.addClass("loading2"); 
}); 

$(document).bind("ajaxStop.secondCall", function() { 
    $body.removeClass("loading2"); 
}); 

Ma questo non funziona nella sua forma attuale. Tutto il consiglio sarebbe apprezzato ...

UPDATE:

come aggiunta al ILYAS SOLUZIONE e sulla base la sua guida ho implementato l'AJAX AVVIO funcitonality NEL MIO chiamata AJAX ....

function sendResponse(thread_id){ 
     $(document).off(".reference_call"); 
     $(document).on("ajaxStart.secondCall", function() { 
     $('.spinner').show(); 
     }); 
$.ajax({ 
    url: 'someURL.php', 
    type: 'post', 
    data: { 
       //data 
     }, 
      success: function(data) { 
      $(document).on("ajaxStop.secondCall", function() { 
       $('.spinner').hide(); 
      }); 
        //do stuff.... 

        } else { 

        //do stuff.... 
        } 
       } 
     }); 
    return false; 
} 

Answer 1

Quindi, come è stato menzionato nella discussione collegata alla domanda, puoi associare e separare da eventi di tipo jax usando i tuoi spazi dei nomi personalizzati. Ecco semplice example dimostrando questo approccio. Nella prima parte del codice si associa a eventi ajax con .firstCall namespace, in questo modo:

$(document).on("ajaxStart.firstCall", function() { 
    $('.spinner1').show(); 
}); 
$(document).on("ajaxStop.firstCall", function() { 
    $('.spinner1').hide(); 
}); 
// then goes your ajax call 

Più avanti nel codice, quando è necessario inviare seconda ajax con diversi ogiva, è necessario associare dal .firstCall namespace e legarsi a .secondCall come questo:

$(document).off(".firstCall"); 
$(document).on("ajaxStart.secondCall", function() { 
    $('.spinner2').show(); 
}); 
$(document).on("ajaxStop.secondCall", function() { 
    $('.spinner2').hide(); 
}); 
// then goes your second ajax call 

in alternativa si potrebbe considerare l'utilizzo di un set di globale Ajax eventi gestori, e spostare la logica su cosa filatore per mostrare/nascondere all'interno di quelle callback, ma questo in realtà dipende da ciò che la logica che è .

Answer 2

ho trovato questa implementazione più affidabile (soprattutto quando si utilizzano le promesse e più chiamate asincrone):

$(document).ajaxStart(function(r) { 
 
    if ($('#d-loading').is(':hidden')) { 
 
    $('#d-loading').modal('show'); 
 
    } 
 

 
}).ajaxStop(function(r) { 
 
    if ($('#d-loading').is(':visible')) { 
 
    $('#d-loading').modal('hide'); 
 
    } 
 

 
}).ajaxError(function(event, request, settings) { 
 
    //Deal with error here 
 
});

sto usando un Bootstrap modale, che posso attivare o disattivare. Spero che sia d'aiuto!

Answer 3

ho avuto lo stesso problema e risolvere con $.active e beforeSend : function(){},

Problema: Ho qualche codice nella intervallo impostato per l'aggiornamento di notifica e abbiamo applicato sovrapposizione loding a livello globale in modo che tutti AJAX caricare quella sovrapposizione e ogni intervallo set che mostra intervallo .SO Come rimuovere quell'overlay per un particolare ajax?

1. setInterval(function() { RefreshNotification(); }, 10000);

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

Soluzione: Come rimuovere oltre giaceva ** Soluzione 1: **
semplice nascondere sovrapposizione sulla beforesend

$.ajax({ 
     type: 'GET', 
     datatype: 'HTML', 
     url: NotificationURL, 
     beforeSend: function() { 

       $('#dvLoading').hide(); 

     }, 
     success: function (result) { } 

}); 

Problema: Se la richiesta del parallelo quindi sopra il codice non funziona

Soluzione 2: nascondere semplice sovrapposizione sulla beforesend e verificare condizioni per la richiesta totale Ajax

$.ajax({ 
     type: 'GET', 
     datatype: 'HTML', 
     url: NotificationURL, 
     beforeSend: function() { 
      //console.log($.active); 
      if ($.active < 2) { 
       $('#dvLoading').hide(); 
      } 
     }, 
     success: function (result) { 
      $("#header_notification_bar").html(""); 
      $("#header_notification_bar").html(result); 
     }, 
     error: function 
      (XMLHttpRequest, textStatus, errorThrown) { 
      alert(errorThrown); 
     } 
    }); 

Godetevi sopra il codice dovrebbe funzionare perfettamente