jQuery Mobile Dialog al caricamento della pagina

Lavorando alla mia prima app jQuery Mobile. Esiste un valore localStorage che deve avere un valore in tutta l’applicazione, quindi ho sfruttato l’evento pageshow per verificare questo valore:

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

Funziona quando si naviga tra le varie pagine, ma non viene mai chiamato quando viene caricata la prima pagina. Ho provato a copiare la precedente istruzione If di nuovo sotto la parte in cui aggiungo l’ascoltatore pageshow, ma ha l’effetto di mostrare la finestra di dialogo, nasconderlo e mostrarlo di nuovo.

In quella prima pagina, sembra che l’apertura della finestra di dialogo stia triggersndo il pagehow (che è strano, considerando il mio selettore), che a sua volta triggers un’altra finestra di dialogo. Qualcuno ha consigli su come aggirare questo, o un modo migliore per fare tutto?

AGGIORNAMENTO # 1: ho provato

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

ma ha avuto lo stesso effetto del mio problema originale in cui lancia la finestra di dialogo, quindi la nasconde, quindi la mostra di nuovo. Sembra che in qualche modo l’avvio della finestra di dialogo stia triggersndo l’evento pageshow, anche se ho provato a filtrarlo nel mio selettore. Si noti che se si rimuove la transizione: opzione “nessuno” , la finestra di dialogo non appare affatto.

AGGIORNAMENTO # 2: ho anche provato a creare una pagina iniziale vuota, quindi a eseguire una semplice transizione della pagina

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

ma ancora non ha il comportamento corretto. In questo scenario, mi porta alla pagina successiva, ma l’evento pageshow non si triggers, perché la mia finestra di dialogo non viene visualizzata. So che non sta sparando perché posso selezionare un’altra pagina dal mio menu di navigazione e la finestra di dialogo appare.

AGGIORNAMENTO # 3: Ho cambiato il mio selettore dove allego l’ascoltatore di pageshow. Invece di selezionare where data-role = “page”, seleziono le pagine specifiche dal loro id. Quindi ho riprovato entrambi gli approcci che ho descritto nei miei precedenti due aggiornamenti, ma funziona ancora in modo errato. Innanzitutto, quando provo ad aggiornare la pagina iniziale utilizzando allowSamePageTransition, sembra che le pagine vengano triggerste due volte, poiché la finestra di dialogo viene avviata due volte. Quindi, quando provo a utilizzare una pagina iniziale vuota, quindi eseguo un reindirizzamento subito dopo aver allegato il listener di pagine in corso, non accade nulla e la finestra di dialogo non viene mai visualizzata. Se si passa a qualsiasi altra pagina, la finestra di dialogo funziona come previsto. Non capisco perché questa prima pagina sia così problematica.

Impostare un intervallo di tempo per mostrare la finestra di dialogo, piuttosto che richiamarla quando viene visualizzata la pagina.

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

In questo modo, la finestra di dialogo mostrerà l’evento pageshow e solo una volta.

aggiornare

Ho trovato questo interessante diagramma di eventi jQueryMobile su questo blog . Spiega perché una finestra di dialogo o un popup vengono triggersti ​​due volte sulla prima pagina e non sul resto delle pagine in caso di struttura a più pagine. Sembra che si spari una volta che la pagina è pronta in DOM e di nuovo quando su pageshow . L’impostazione di un timeout impedisce l’ pageinit della finestra di dialogo su pageinit , pertanto ignora tale evento fino a quando pageshow viene triggersto pageshow .

inserisci la descrizione dell'immagine qui

Fonte immagine / diagramma : http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html

Molto probabilmente è nella prima pagina che quell’evento è già stato triggersto quando il tuo pezzo di codice è stato eseguito. Questo spiega perché non si ottiene nulla solo sulla prima pagina.

Riguardo al tuo secondo punto, è normale dato che changePage “cambierà” la pagina nella finestra di dialogo e, una volta chiusa la finestra, tornerà alla tua pagina precedente. Pertanto, il if viene eseguito 2 volte.

Il mio suggerimento è che per la prima volta che si accede alla prima pagina, è ansible eseguire nuovamente la transizione alla stessa pagina subito dopo aver registrato la richiamata per l’evento pageshow.

Ho usato “pagecreate” e questo sembra risolvere il mio problema (finora …)

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