jquery-mobile - exemplos - jquery popup example

jQuery Mobile Dialog en la carga de la página

Question

Trabajando en mi primera aplicación jQuery Mobile. Hay un valor localStorage que debe tener un valor en toda la aplicación, así que hice tapping en el evento pageshow para verificar este valor:

$(function () {
$("div[data-role=''page'']").on("pageshow", function (event, ui) {
if (getValue() == null) {
// show the dialog
$.mobile.changePage("#dialog");
}
});
});

Esto funciona cuando se navega por las distintas páginas, pero nunca se llama cuando se carga la primera página. Traté de copiar la declaración If anterior de nuevo debajo de la parte donde agregué el oyente de pageshow, pero tiene el efecto de mostrar el diálogo, ocultarlo y luego volver a mostrarlo.

En esa primera página, parece que abrir el cuadro de diálogo está activando el pageshow (que es extraño, teniendo en cuenta mi selector), que a su vez activa otro diálogo. ¿Alguien tiene consejos sobre cómo solucionar esto o una mejor manera de abordarlo?

ACTUALIZACIÓN # 1: probé

$.mobile.changePage( "#mypage", { allowSamePageTransition: true, transition: "none" } );

pero tuvo el mismo efecto que mi problema original donde lanza el diálogo, luego lo oculta y luego lo muestra de nuevo. Parece que de alguna manera el inicio del diálogo está activando el evento de pageshow, aunque traté de filtrarlo en mi selector. Tenga en cuenta que si elimina la transición: la opción "ninguno" , el cuadro de diálogo no aparece en absoluto.

ACTUALIZACIÓN # 2: también intenté crear una página inicial en blanco, luego hacer una transición de página simple

$.mobile.changePage("#mypage");

pero todavía no tiene el comportamiento correcto. En este caso, me lleva a la página siguiente, pero el evento pageshow no se activa porque mi diálogo no aparece. Sé que no está activando porque puedo seleccionar otra página de mi menú de navegación y aparece el cuadro de diálogo.

ACTUALIZACIÓN # 3: Cambié mi selector donde adjunto el oyente de pageshow. En lugar de seleccionar donde data-role = "página", estoy seleccionando las páginas específicas por su id. Luego volví a probar los dos enfoques que describí en mis dos actualizaciones anteriores, pero todavía funciona incorrectamente. Primero, cuando trato de actualizar la página inicial usando allowSamePageTransition, parece que pageshow dispara dos veces, porque el diálogo se inicia dos veces. Luego, cuando intento usar una página inicial en blanco y luego hago una redirección inmediatamente después de adjuntar el oyente de pageshow, no ocurre nada y el diálogo nunca aparece. Si navego a cualquier otra página, el diálogo funciona como se esperaba. No entiendo por qué esta primera página es tan problemática.

Answer 1

Lo más probable es que en la primera página, ese evento ya se active cuando se ejecuta su fragmento de código. Lo que explica por qué no obtienes nada solo en la primera página.

Sobre su segundo punto, es normal ya que, changePage "cambiará" la página al diálogo, y una vez que cierre el diálogo, volverá a su página anterior. Por lo tanto, el if se ejecuta 2 veces.

Mi sugerencia es que, por primera vez, cuando ingrese a la primera página, puede volver a hacer la transición a la misma página justo después de registrar la devolución de llamada para el evento de pageshow.

Answer 2

Establezca un intervalo de tiempo para mostrar el cuadro de diálogo, en lugar de llamarlo una vez que se muestre la página.

$(document).on(''pageshow'', ''#myPage'' ,function () {
if (getValue() == null) {
setTimeout(function () {
$.mobile.changePage(''#dialog'');
}, 100); // delay above zero
}
});

De esta forma, el diálogo pageshow evento pageshow y solo una vez.

actualizar

Encontré este interesante diagrama de eventos jQueryMobile en este blog . Explica por qué se dispara un diálogo o una ventana emergente dos veces en la primera página y no en el resto de las páginas en el caso de la estructura de varias páginas. Parece que se dispara una vez que la página está lista para DOM y nuevamente cuando está en pageshow . Establecer un tiempo de espera evita que el diálogo se pageinit en el pageinit de pageinit y, por lo tanto, omite ese evento hasta que se pageshow .

Fuente de la imagen / diagrama : http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html

Answer 3

Utilicé "pagecreate" y eso parece resolver mi problema (hasta ahora ...)

$(document).on(''pagecreate'', "#page-formyID", function () {
//whatever
});