Come posso rilevare che una qualsiasi richiesta ajax viene completata utilizzando jQuery?

Question

Ho una pagina in cui posso inserire alcuni javascript/jquery per manipolare l'output. Non ho altri controlli sul markup della pagina, ecc.

Ho bisogno di aggiungere un elemento extra tramite jquery dopo ogni presente sulla pagina. Il problema è che gli elementi vengono generati tramite una chiamata asincrona sulla pagina esistente che si verifica dopo che $ (document) .ready è completo.

In sostanza, ho bisogno di un modo per chiamare il mio jQuery dopo che la pagina è stata caricata e le successive chiamate ajax sono state completate. C'è un modo per rilevare il completamento di qualsiasi chiamata ajax sulla pagina e quindi chiamare la mia funzione personalizzata per inserire gli elementi aggiuntivi dopo i nuovi s creati?

Answer 1

Purtroppo questo non vale in quanto sembra che il PO non utilizza$.ajax()o qualsiasi altro metodo ajax jQuery per caricare effettivamente il contenuto, ma lasciando qui nel caso futuro googler di stanno facendo questo.

---

È possibile utilizzare any of the global ajax events that meet your needs here, siete probabilmente dopo $.ajaxComplete() o $.ajaxSuccess().

Ad esempio:

$(document).ajaxSuccess(function() { 
    alert("An individual AJAX call has completed successfully"); 
}); 
//or... 
$(document).ajaxComplete(function() { 
    alert("ALL current AJAX calls have completed"); 
}); 

Se si desidera eseguire solo alcuni funzione generica quindi fissare loro di documentare (sono solo gli eventi sotto). Se si desidera mostrare qualcosa in particolare, ad esempio un modale o messaggio, è possibile utilizzare loro un po 'più ordinato (anche se questo non sembra essere quello che stai dopo), in questo modo:

$("#myModal").ajaxComplete(function() { 
    $(this).fadeIn().delay(1000).fadeOut(); 
}); 

Answer 2

Come potrei capire, stai usando la funzione Ajax di jQuery nel tuo gestore pronto. Quindi potresti semplicemente passare un'altra funzione, che sarà invocata dopo che la tua funzione Ajax avrà ricevuto una risposta. Per esempio

$(document).ready(function(){ 
    $("#some_div").load('/some_url/', function(){ 
     /* Your code goes here */ 
    }); 
}); 

Answer 3

Si potrebbe utilizzare .live()/.delegate().

Answer 4

Questo esempio dimostra e nasconde elementi all'inizio e alla fine del ajax chiamate utilizzando jQuery:

$("#contentLoading").ajaxSend(function(r, s) { 
     $(this).show(); 
     $("#ready").hide(); 
    }); 

    $("#contentLoading").ajaxStop(function(r, s) { 
     $(this).hide(); 
     $("#ready").show(); 
    }); 

#contentLoading è un indicatore immagini gif avanzamento.

Answer 5

È possibile riscrivere la funzione send() dell'oggetto XMLHttpRequest.

Vedere una soluzione per fare così usando puro Javascript here.