jQuery Mobile normalmente utilizza ajax come tecnologia per il caricamento dei contenuti.
A questo bisogna ggiungere che una delle modalità caratteristiche di costruzione delle applicazioni e creare un unico file e inserire all’interno di questo diversi div con data-role=”page” che costituiscono le pagine vere e proprie del nostro sito.
Questa pagina, per esempio, usa ajax per passare dalla prima alla seconda pagine e viceversa: è la struttura di default di caricamento dei link.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page" id="prima"> <div data-role="header"><h1>Prima</h1></div> <div data-role="content"> <a href="#seconda">Seconda</a> </div> </div> <div data-role="page" id="seconda"> <div data-role="header"><h1>Seconda</h1></div> <div data-role="content"> <a href="#prima">prima</a> </div> </div> </body> </html>
Questo pone un evidente problema sulla gestione dell’evento document.ready che si scatena una sola volta al caricamento della pagina completa.
L’evento che invece mi permette di intercettare il caricamento della singola pagina è “init”.
Modifichiamo i nostri due link in questo modo:
<a href="#seconda" data-role="button">Seconda</a> ... <a href="#prima" data-role="button">prima</a>
e aggiungiamo uno script che tramite un alert segnala questa differenza:
<script>
$(document).ready(function(e) {alert(0);});
$(document).on('pageinit',function(){alert(1);});
</script>
Al primo accesso alla prima pagina avremo due alert con contenuto 0 e 1,
all’accesso alla seconda pagina un solo alert con, ovviamente, 1.
L’esempio.
Sorry, the comment form is closed at this time.