w3schools ajax jquery-mobile document-ready

ajax - w3schools - jQuery mobile $(document).ready equivalente



jquery document ready function w3schools (6)

en las páginas de navegación de ajax, el clásico formulario de "documento listo" para realizar la inicialización javascript simplemente no se activa.

¿Cuál es la forma correcta de ejecutar código en una página cargada de ajax?

(Quiero decir, no es mi ajax ... es el sistema de navegación de páginas móviles jquery el que me lleva a esa página)

Ok, sospeché algo así ... muchas gracias =) Pero ... todavía no funciona, aquí está mi código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>mypage</title> <link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" /> <script type="text/javascript" src="jquery-1.5.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script> <script type="text/javascript"> $(''div'').live(''pageshow'',function(event, ui){ alert(''ciao''); }); </script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Shopping Cart</h1> </div> <div data-role="content"> asd </div> </div> </body>

¿Debo especificar el id de div?

Como se mencionó, el evento pageinit funciona. Sin embargo, si tuviera el caso de una situación de página multi-física (por ejemplo, navegando desde index.html a mypage.html), la función que se ejecuta está en el elemento primario.

Cualquier lógica en el pageinit debería ser algo perteneciente al padre, no el enlace que se está cargando. No se puede llamar a una función en la página a la que se dirige porque la navegación se maneja a través de una devolución de llamada ajax en JQM y los elementos en su página secundaria estarían fuera del alcance.

En este caso particular, puede usar el atributo data-ajax = "false":

<a href="mypage.html" data-ajax="false">My Page</a>

Hacer esto eliminará la navegación ajax, realizará una recarga de página completa, que a su vez disparará una función $ (document) .ready en la página que está cargando.

El mejor equivalente de $(document).ready() es $(document).bind(''pageinit'')

Simplemente eche un vistazo a la documentación de jQuery Mobile: http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Importante: use $ (documento) .bind (''pageinit''), no $ (documento) .ready ()

Lo primero que aprendes en jQuery es llamar al código dentro de la función $ (document) .ready () para que todo se ejecute tan pronto como se cargue el DOM. Sin embargo, en jQuery Mobile, Ajax se usa para cargar los contenidos de cada página en el DOM mientras navegas, y el controlador listo para DOM solo se ejecuta para la primera página. Para ejecutar código cada vez que se carga y se crea una página nueva, puede vincularse al evento pageinit. Este evento se explica en detalle en la parte inferior de esta página.

Pasé un tiempo investigando lo mismo, ya que los documentos de JQM no son muy detallados en este momento. La siguiente solución funciona bien para mí:

<script type="text/javascript"> $(''div:jqmData(role="page")'').live(''pagebeforeshow'',function(){ // code to execute on each page change }); </script>

Debe implementar su propio flujo de comprobación para evitar la inicialización múltiple ya que el código anterior se ejecutará en cada cambio de página.

Si desea que el código se ejecute en una página determinada (apuesto a que ese es el caso), puede usar este patrón:

$(''div:jqmData(url="thepageyouwanted.html")'').live(''pageshow'',function(){ // code to execute on that page //$(this) works as expected - refers the page });

Eventos que puedes usar:

  • pagebeforeshow comienza justo antes de la transición
  • pageshow comienza justo después de la transición
  • pagecreate inicia solo la primera vez que se carga la página

Todos los eventos de pageshow and pagebefore show se llaman cada vez que se muestran. Si quieres algo que suceda la primera vez, puedes hacer algo como esto:

$(''#pageelementid'').live("pagecreate", pageInitializationHandler);

Luego, más adelante en tu código:

function pageInitializationHandler(event) { //possibly optional based on what exactly you''re doing, //but keep it in mind in case you need it. //Also, this seems to need to be an exact duplicate of the //way you used it with the .live() method or jQ/jQM won''t unbind //the right thing $(''#pageelementid'').die("pagecreate", pageInitializationHandler); //Do your actual initialization stuff }

Encontré esto particularmente útil cuando estás haciendo archivos html con múltiples "páginas" de JQM en ellos. Configuré el mío para que el código de inicialización real para todo el shebang esté en mi página principal (del archivo) y luego todas las demás páginas secundarias tienen un controlador de creación de páginas que comprueba si el código de inicialización se ha activado y, de no ser así, a $ .mobile.changePage ("# mainpage"). Funciona bastante bien