Javascript Girl
  1. Javascript Girl
  3. Pageshow non déclenché après changement de page
Intereting Posts
Phantomjs n'attend pas la charge de page "pleine" Exécuter Google Analytics dans iframe? SetInterval ne fonctionne pas (démarrage une seule fois) dans l'extension Google Chrome Typeahead.js dans le projet Django Exclusion du dossier grunt (minimatch / glob) Faites en sorte que AngularJS saute en exécutant une boucle de synthèse si $ http.get () n'a donné aucune nouvelle donnée Javascript: type naturel de chaînes alphanumériques Chrome implique un problème d'incohérence du script Changer l'étiquette à l'aide de javascript Faire apparaître la fenêtre du navigateur dans la barre des tâches Pourquoi "{} == {}" entraîne un SyntaxError? Comment localiser (i18n) moment.js dans meteor.js? Remplacement de la chaîne JavaScript – Comment utilisez-vous des variables correspondantes dans la chaîne de remplacement? Chargement de la bibliothèque JavaScript en Python en utilisant PyV8 Post-chargement: vérifiez si une image se trouve dans le cache du navigateur

Pageshow non déclenché après changement de page

J'utilise jQuery Mobile et j'aimerais rediriger le navigateur vers une autre page, après que l'utilisateur ait cliqué sur un bouton sur la maison. Pour ce faire, j'ai écrit: 

$.mobile.changePage("album-search-results.html",{ data:{area:searchArea, value:searchValue}, transition: "pop" });

Et cela fonctionne bien, il charge la page correcte et il place même les bonnes valeurs sur l'URL. Malheureusement, l'événement pageshow n'est pas déclenché: 

  <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> </head> <body> <div data-role = "page" data-theme = "d" id = "SearchResults"> <div data-role = "header"> <h1>Aggregator</h1> </div> <div data-role = "content"> </div> </div> <script type="text/javascript"> $("#SearchResults").on("pageshow",function(event, ui){ console.log(ui.prevPage); }); </script> </body> </html>

La console est toujours vide lorsque je charge cette page de la précédente. Qu'est-ce qui ne va pas? Merci

Solution

La solution est simple, déplacez le bloc de script dans une page div. Dans votre cas, le bloc de script est mis au rebut. Changez-le comme ça:

De : 

 <body> <div data-role = "page" data-theme = "d" id = "SearchResults"> <div data-role = "header"> <h1>Aggregator</h1> </div> <div data-role = "content"> </div> </div> <script type="text/javascript"> $("#SearchResults").on("pageshow",function(event, ui){ console.log(ui.prevPage); }); </script> </body>

À : 

 <body> <div data-role="page" data-theme="d" id="SearchResults"> <div data-role = "header"> <h1>Aggregator</h1> </div> <div data-role = "content"> </div> <script> $(document).on("pageshow","#SearchResults",function(event, ui){ console.log(ui.prevPage); }); </script> </div> </body>

Exemple:

Index.html 

 <!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script> $(document).on('click', '#change-page', function(){ $.mobile.changePage("album-search-results.html",{ data:{area:"asda", value:"1"}, transition: "pop" }); }); </script> </head> <body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3> First Page </h3> <a href="#second" class="ui-btn-right">Next</a> </div> <div data-role="content"> <a data-role="button" id="change-page">Change Page</a> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html>

Album-search-results.html 

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> </head> <body> <div data-role="page" data-theme="d" id="SearchResults"> <div data-role = "header"> <h1>Aggregator</h1> </div> <div data-role = "content"> </div> <script> $(document).on("pageshow","#SearchResults",function(event, ui){ console.log(ui.prevPage); }); </script> </div> </body> </html>