$ (documento). Equivalente en contenido cargado de forma asíncrona

Question

Tengo una IU (llamémosla página 1) que tiene una gran cantidad de HTML y JavaScript. Cuando algunos de los elementos en la página 1 se hace clic, una interfaz de usuario de diálogo jQuery se abre y se carga con una página parcial (Llamemos que página 2):

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

Page 2 a continuación, tiene un montón de HTML y JavaScript también. Ejemplo simplificado:

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

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

tengo JS dentro page2Stuff.js que hay que esperar hasta la página 2 ha sido completamente renderizada. ¿Hay algo que pueda usar en esta página parcial para ver si el nuevo HTML se ha agregado al DOM? He intentado el siguiente:

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

Esto no puede encontrar page2ReadyFunction. Supongo que porque .load ejecuta el JavaScript en page2Stuff.js y luego lo descarta o algo?

La forma en que puedo hacer que funcione ahora es usar setTimeout y comprobar continuamente si $('#page2Body') devuelve algo, pero esto no parece ideal.

Answer 1

En lugar de tener su etiqueta script al comienzo de su segunda página, lo puso al final de ella, después de todo el HTML, así:

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

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

Dado que el código se ejecutará de acuerdo para ordenar el origen, puede estar seguro de que el HTML estará listo para cuando se ejecute el script.

Answer 2

Cuando ejecuta la función load, se espera que page2ReadyFunction exista en ese momento exacto. No lo hace porque no ha cargado el script. A continuación se obtendría en torno a ese problema, sino también no debe trabajo porque el guión se carga de forma asíncrona:

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

para moverse por ese problema, se podría hacer algo como esto:

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

Este la función intenta cada 100 ms para ver si existe page2ReadyFunction y lo llama cuando lo hace.

Por supuesto, no debería tener que preocuparse por nada de esto porque la etiqueta del script secundario se cargará de forma asíncrona y la renderización debería ocurrir antes de que se ejecute JavaScript. Puede verificar esto usando console.log para ver primero lo que se dispara, el JavaScript en el script del cliente o la función de devolución de llamada.

Answer 3

la función de devolución de llamada para la carga de los docs jQuery: http://api.jquery.com/load/

completa (responseText, textStatus, XMLHttpRequest) Una función de devolución de llamada que se ejecuta cuando la solicitud completa.

Esta función se ejecuta cuando se completa la solicitud, pero debe esperar hasta que se haya procesado la página2.

Una solución simple sería poner un bloque $ (document) .ready() en los archivos javascript que obtiene la página2.

Answer 4

favor si quieres algo de carga tras carga ajax completa

tienes que usar la función ajax completa

así

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

todo lo que en lugar de

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

Answer 5

Servir a la Página 2 así:

<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

podría usar algo como esto:

<body onload="function2kickOffP2()"> 

Esto iría en el cuerpo de la página 2.