jQuery ready evento non attivato sul caricamento parziale della pagina

Question

Ecco la situazione: una pagina che contiene html e utilizza il jQuery libray e le schede jQuery plugin UI carica un'altra pagina quando si fa clic su una scheda. Il problema è che quando la pagina/html viene caricata/resa (semplifichiamo e diciamo che sta facendo qualcosa come $ ("# myDiv"). Load (url);), l'evento ready non viene sparato perché ovviamente " finestra "ha già caricato e attivato l'evento di caricamento. Ciò significa che nessuna delle cose jQuery che voglio fare sul caricamento (caricamento parziale) della pagina viene eseguita. Il plugin UI.tabs è progettato per caricare pagine in altre schede e possiamo presumere che altre pagine possano contenere il proprio jQuery ... quindi dovrebbe esserci un modo per aggirare questo ..

Posso pensare a modi molto orribili per superare il problema, come avere un blocco di script nella parte inferiore della pagina che viene renderizzata (caricata in un div) che fa tutte le cose che farei quando viene sparato pronto (come si può supporre che il browser abbia già reso la pagina se lo script blocco è colpito). Questa è comunque una pratica MOLTO cattiva. Eventuali suggerimenti?

Answer 1

io credo che si possa fare qualcosa di simile (derivato da ASP.NET):

<script type=”text/javascript”> 
    <!-- 
    Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End); 
    function Request_End(sender, args) 
    { 
      // Insert code you want to occur after partial page load here 
    } 
    // --> 
</script> 

Che dovrebbe collegare in caso di richiesta end che include gli aggiornamenti della pagina parziali. Ovviamente aggiornerai l'esempio precedente per chiamare la funzione JS appropriata che desideri.

Answer 2

Il metodo di caricamento offre un callback che viene eseguito dopo il caricamento del contenuto.

$("#myDiv").load(url, null, function() { 
    //do your stuff here 
}); 

La documentazione completa e gli esempi in jQuery.com: http://docs.jquery.com/Ajax/load

Answer 3

Come stai sparando la richiesta AJAX al server? Se stai usando ASP.NET AJAX, la risposta di Brian Hasden è ciò che stai cercando. Se si utilizza jQuery per inviare la richiesta, è possibile impostare una richiamata utilizzando la funzione di caricamento.

$(".ajaxLink").load(url, null, function() { 
    // code here 
}); 

load() Documentation

o impostare un evento ajaxComplete globale che viene generato ogni volta che una chiamata AJAX è completa.

$(document).ajaxComplete(function() { 
    // code here 
}); 

ajaxComplete() Documentation

Answer 4

Bene - sto usando ASP.NET MVC con jQuery. NON sto usando la vista parziale (ascx) per questa parte dell'applicazione, invece sto cantando full view, ma caricandole in div. Quindi ho una vista principale con una testa con qualche riferimento a un file js che è la logica lato client per questo "tipo" di vista. Quando si fa clic su una scheda in questa vista, utilizziamo le schede jquery per "caricare" un'altra vista in qualche div. Il modo in cui le schede vengono caricate usando questo plugin è semplicemente dando un url (piuttosto che usare un carico a cui - come sottolineato - potrei aggiungere una funzione di richiamata piuttosto che contare su pronto).

Tuttavia. Non voglio TUTTA la logica del client per essere in una vista genitore, come ogni vista dovrebbe essere in grado di caricare un'altra vista per URL (le viste secondarie includono un collegamento al loro file js correlato che contiene tutta la logica per formattare/collegamento quando caricato).

Ciò che è DAVVERO confuso per me ora è che sembra funzionare in alcune situazioni e non in altre; per esempio 1) quando la vista genitore è aperta in un frame in IE, le letture della vista secondaria non vengono mai attivate 2) quando si apre lo stesso url direttamente in IE, le letture delle viste secondarie vengono attivate 3) quando si apre lo stesso URL in FFX2 il pronti tutti NON sono attivati ​​4) finalmente ..ma quando si apre una vista secondaria (che ha viste secondarie) di questo genitore in FFX2, l'evento pronto per il bambino SONO innescato! .. sconcertante ..

Sto per eseguire alcuni test e tornare a voi, ma qualsiasi suggerimenti sul perché questo comportamento potrebbe essere diverso sarebbe molto apprezzato

AGGIORNAMENTO: Ah ah! .. sembra che anche con gli ostacoli sopra cancellati, c'è una differenza di browser (ovviamente dalla lettura sopra) .. il semplice test di seguito funziona bene in IE7 ma fallisce in FFX2. L'evento pronto viene attivato in IE ma non in FFX quando si carica Test2.htm in Test1.htm. Dall'esperienza so che questo significa che IE ha una "stranezza" e FFX funziona come ci si aspetterebbe basato sul W3C. Quindi sembra che questo approccio è un no, a meno che qualcuno ha qualche suggerimento ?:

Prova1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js"> </script> 
    <script type="text/javascript" language="javascript"> 
    <!-- 
     $(document).ready(function() { 
      alert("Test1.htm"); 
      $("#Test1").load("Test2.htm"); 
     }); 
    //--> 
    </script> 
</head> 
<body> 
    <h3>SOME TEST</h3> 
    <div id="Test1">EMPTY</div> 
</body> 
</html> 

Prova2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js"> </script> 
    <script type="text/javascript" language="javascript"> 
    <!-- 
     $(document).ready(function() { 
      alert("Test2.htm"); 
      //$("#Test1").load("Test3.htm"); // load more 
     }); 
    //--> 
    </script> 
</head> 
<body> 
    <h3>SOME TEST</h3> 
    <div id="Test2">EMPTY</div> 
</body> 
</html> 

Answer 5

OK no .. quindi ho un semplice rispondere a questo problema ora, il che dovrebbe significare minime modifiche al codice. Piuttosto che le viste secondarie (queste sono vere viste aspx che non hanno tag html, head o body) con un js include (essenzialmente il modello di comportamento sul lato client) che risponde a $ (document) .ready, possiamo usare il suggerimento da mkedobbs per fornire qualcosa di simile. Semplicemente:

$("#MyDiv").load("page.htm", null, function(){ $(document).trigger("PartialLoaded"); }); 

Poi nel sub vista js includono

$(document).bind("PartialLoaded", function(){ .........});