$ (documento) .ready equivalente in contenuto caricato in modo asincrono

Question

Ho un'interfaccia utente (chiamiamola pagina 1) che contiene molto HTML e JavaScript. Quando alcuni degli elementi a pagina 1 sono cliccato, una UI Dialog jQuery è aperto e caricato con una pagina parziale (chiamiamolo che pagina 2):

$("#myDialog").dialog({ modal: true /* Other options */ }); 
$('#myDialog').load('page2Link', { }, function() { }); 
$('#myDialog').dialog('open'); 

Page 2 ha poi un gruppo di HTML e JavaScript anche. esempio semplificato:

<script src="Scripts/page2Stuff.js" type="text/javascript"></script> 

<div id="page2Body"> 
    <!-- More elements --> 
</div> 

ho JS all'interno page2Stuff.js che ha bisogno di aspettare fino a quando la pagina 2 è completamente resa. C'è qualcosa che posso usare in questa pagina parziale per vedere se il nuovo HTML è stato aggiunto al DOM? Ho provato la seguente:

$('#myDialog').load('page2Link', { }, page2ReadyFunction); 

Questo non riesce a trovare page2ReadyFunction. Presumo perché .load esegue il codice JavaScript in page2Stuff.js e quindi lo elimina o qualcosa del genere?

Il modo in cui sono in grado di farlo funzionare ora è utilizzare setTimeout e verificare continuamente se $('#page2Body') restituisce qualcosa, ma questo non sembra l'ideale.

Answer 1

Invece di avere il tag script all'inizio della seconda pagina, metterlo alla fine di esso, dopo tutto il codice HTML, in questo modo:

<div id="page2Body"> 
    <!-- More elements --> 
</div> 

<script src="Scripts/page2Stuff.js" type="text/javascript"></script> 

Dal momento che il codice verrà eseguito in base per ordinare l'ordine, puoi essere certo che l'HTML sarà pronto al momento dell'esecuzione dello script.

Answer 2

Quando si esegue la funzione load, è previsto che page2ReadyFunction esista in quell'esatto momento. Non perché non hai caricato lo script. Di seguito otterrebbe intorno a quel problema, ma anche non dovrebbe lavoro perché lo script verrà caricato in modo asincrono:

$('#myDialog').load('page2Link', { }, function() {page2ReadyFunction();}); 

per aggirare questo problema, si potrebbe fare qualcosa di simile:

$('#myDialog').load('page2Link', { }, function() { 
    function tryPageLoad() { 
     if(page2ReadyFunction) 
      page2ReadyFunction(); 
     else 
      setTimeout(tryPageLoad, 100); 
    } 
    tryPageLoad(); 
}); 

Questo la funzione prova ogni 100 ms per vedere se esiste page2ReadyFunction e lo chiama quando lo fa.

Ovviamente, non dovresti preoccuparti di nulla di tutto ciò perché il tag script figlio caricherà in modo asincrono e il rendering dovrebbe avvenire prima dell'esecuzione di JavaScript. È possibile verificare questo utilizzando console.log per vedere cosa viene generato per primo, il codice JavaScript nello script client o la funzione di callback.

Answer 3

la funzione di callback per il carico dalla documentazione jQuery: http://api.jquery.com/load/

completa (responseText, textStatus, XMLHttpRequest) Una funzione callback che viene eseguito quando la richiesta viene completata.

Questa funzione viene eseguita al completamento della richiesta, ma è necessario attendere fino al rendering di pagina2.

Una soluzione semplice sarebbe quella di inserire un blocco $ (documento) .ready() nei file javascript estratti da pagina2.

Answer 4

per favore, se volete qualcosa di carico dopo il carico ajax completa

devi utilizzare la funzione ajax piena

così

var req= $.ajax({ 
      url:'page2Link', 
      type:"post", 
      data:{ajax:1,field_id:field_ids,whatever:whatever} 

     }); 
     //after loading 
     req.complete(function(res){ 
      $('#myDialog').html(res); 
     }); 
     //after complete loading and request end 
     req.always(function(res){ 
      page2ReadyFunction 
     }); 

tutto ciò che, invece di

$('#myDialog').load('page2Link', { }, function() { }); 

Answer 5

Esegui la Pagina 2 in questo modo:

<script src="Scripts/page2Stuff.js" type="text/javascript"></script> 

<div id="page2Body"> 
    <!-- More elements --> 
</div> 

<script> 
$(function() { 
    // call your function from page2Stuff.js here 
}); 
</script> 

Answer 6

si potrebbe usare qualcosa di simile:

<body onload="function2kickOffP2()"> 

Ciò andrebbe sul corpo di page2.