web-dev-qa-db-fra.com

pageinit jQuery Mobile/Pagecreate pas de tir

J'ai 5 pages - pour la facilité, disons:

  • one.html
  • deux.html
  • trois.html
  • quatre.html
  • cinq.html

Lorsque je charge chaque page individuelle, pageinit et pagecreate se déclenchent correctement. 

Le problème:

Lorsque je passe de one.html à two.html, pageinit et pagecreate tous les deux, MAIS quand je reviens à one.html (from two.html), pageinit et pagecreate, NE tirez PAS. 

Pourquoi est-ce et comment puis-je toujours déclencher pageinit et pagecreate lors du chargement de page, ainsi que la navigation dans chaque page?

Mettre à jour:

Pour chaque page j'ai:

<div data-role="page" id="page-name">

 // content
</div>

Pour tester l'ordre lorsque les choses se déclenchent, je le fais:

$(document).on('pagecreate','[data-role=page]', function(){
  console.log('PAGECREATE');
});
$(document).on('pageinit','[data-role=page]', function(){
  console.log('PAGEINIT');
});
$(document).on('pagebeforeshow','[data-role=page]', function(){
  console.log('PAGEBEFORESHOW');
});
$(document).on('pageshow','[data-role=page]', function(){
  console.log('PAGESHOW');
});

Comment utiliser le changement de page pour toujours appeler les pageinit et pagecreate

jqueryjquery-mobile
18
cusejuice

Vous recherchez les mauvais événements, pageinit et pageshow sont ce qui devrait vous préoccuper.

pageinit se déclenche chaque fois qu'une page est chargée pour la première fois, jQM met en cache des pages dans le DOM/mémoire. Ainsi, lorsque vous revenez de deux.html à un.html, pageinit ne se déclenchera pas (il est déjà initialisé).

pageshow se déclenche à chaque fois qu'une page est affichée, voici ce que vous devez rechercher lorsque vous revenez de deux.html à un.html

Ensemble, vous pouvez obtenir beaucoup de code propre, utiliser pageinit pour l’initialisation, la configuration, etc. et mettre à jour votre DOM à l’état initial. Si vous avez des données dynamiques sur la page qui peuvent changer entre les vues, gérez-les dans pageshow

Voici une bonne conception pour les sites Web plus volumineux que nous utilisons dans un environnement de production:

  1. lie un événement en direct à toutes les pages/boîtes de dialogue pageinit et pageshow dans certains événements inclus sur chaque page:

    $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

  2. Je référence chaque page avec un nom: <div data-role="page" data-mypage="employeelist"> Dans cet événement en direct, vous pouvez avoir une instruction switch pour chaque page "name", puis vérifiez event.type pour pageinit/pageshow ou les deux et mettez votre code là-bas. puis chaque fois qu'une page est créée/affichée, cet événement est déclenché, il sait quelle page l'a déclenché et appelle ensuite le code correspondant

  3. Maintenant, quel que soit le point d’entrée d’un utilisateur sur votre site, tous les gestionnaires de toutes les pages sont chargés. Comme vous le savez peut-être déjà, lorsque vous accédez à une page, elle n’extrait que <script/> dans la div [data-role = "page"] - ignorer tout JS dans le <head/>, placer un JS séparé sur chaque page est un fouillis et devrait être évité dans tout grand site je crois

  4. Essayez de ne pas utiliser de sélecteurs de blanchet dans votre jQuery, par exemple. $('div.myClass') puisque cela va chercher dans tous vos DOM qui peuvent avoir plus d'une page jQM. Heureusement, dans le gestionnaire d'événements en direct pour pageinit/pageshow mentionné ci-dessus, this fait référence à la page actuelle. Ainsi, toutes les recherches DOM en son sein, par exemple. $(this).find('div.myClass') Cela garantit que vous ne récupérez que des éléments dans la page en cours. (Bien sûr, cela ne concerne pas les identifiants). Notez que dans l'événement pageshow, vous pouvez également utiliser $.mobile.activePage, mais ceci n'est pas disponible dans pageinit, je ne l'utilise donc pas pour des raisons de cohérence


Finalement, j'ai eu trop de code. J'ai donc construit un objet de gestionnaire dans lequel le js de chaque page est inclus dans un fichier js distinct et je peux enregistrer les gestionnaires avec l'événement en direct.

L'inconvénient est que tous vos js pour l'ensemble de votre site sont chargés sur la première page à laquelle l'utilisateur accède. Toutefois, même un site volumineux est plus petit que jQuery ou jQM, cela ne devrait donc pas être un problème. Mais si votre site est vraiment grand, je suppose que vous pourriez regarder dans RequireJS.

Un avantage est que vous ne chargez plus tous vos JS pour chaque page via AJAX chaque fois que l'utilisateur accède à une nouvelle page. Si tout votre JS est disponible à l'entrée, vous pouvez maintenant mettre les instructions de débogage et déboguer beaucoup plus facilement!

26
Clarence Liu

Je crois que pageinit et pagecreate ne sont tous deux appelés qu'une fois lorsque la page est initialisée et créée dans le DOM, respectivement. 

Vous voudrez peut-être examiner l'événement pagechangehttp://jquerymobile.com/test/docs/api/events.html

3
Chase

Vous devez lire attentivement la documentation de l'événement jQuery Mobile: http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Les liens ci-dessus donnent un bon aperçu du moment où chacun des événements se déclenche. Voici quelques exemples tirés de la page:

pageinit

Déclenché sur la page en cours d'initialisation, une fois l'initialisation terminée. Nous vous recommandons de lier cet événement à la place de DOM ready (), car cela Fonctionnera que la page soit chargée directement ou si le fichier contenu est tiré dans une autre page dans le cadre du système de navigation Ajax .

.

pageshow

Déclenché sur la "page d'accueil" après que l'animation de transition a été complétée. Les rappels pour cet événement recevront un objet de données sous la forme de Leur 2e argument. Cet objet de données a les propriétés suivantes: PrevPage (objet) Objet de collection jQuery contenant l'élément de page DOM dont nous venons de faire la transition. Notez que cette collection Est vide lors du passage de la première page au cours du démarrage de Application.

Pour réellement répondre à votre question, n'utilisez pas pageinit, utilisez pageshow. pageshow se déclenche lors de l'affichage initial d'une page (juste après que l'événement pageinit a été déclenché sur l'élément), mais également lors des visites ultérieures de la page.

1
Jasper

Si vous souhaitez appeler une fonction à chaque fois avant de charger une page, vous pouvez utiliser pagebeforeshow i.e. 

  $("#YourPageID").on('pagebeforeshow ', function() {
        //YourFunctionCall();
    });

de même que vous pouvez essayer de lier votre pageinit avec l'identifiant de page, mais page init n'est appelé qu'une fois lors de l'insertion de votre page dans DOM. http://jquerymobile.com/test/docs/api/events.html

  $("#YourPageID").on('pageinit', function() {
        //YourFunctionCall();
    });
0
Tanveer

S'il s'agit d'une requête ajax sur cette page, le script doit être écrit dans le corps du document, sinon il ne fonctionnera pas du tout pour ajax.

<!DOCTYPE html>
<html>
  <head>
..........
  </head>
  <body>
    <div data-role="page" data-control-title="Detail" id="self_edit_page" data-theme="e">
...........
  </div>
  <script type="text/javascript" language="javascript" >
  $('#self_edit_page').bind("pagebeforeshow",function(event)
.......
  </script>
   </div>
  </body>
</html>
0
jackhoo

Ce qui suit fonctionne bien

<div data-role="page" id="signupForm">
    ...
    ...
<script type="text/javascript" src="test.js"></script>
</div>

test.js peut contenir le code suivant

// test.js starts here

$('#signupForm').on('pageinit', function(){
    // your code goes here
    ...
    ...

 });
// test.js ends here

Dans votre formulaire de connexion, vous pouvez avoir un lien pour signupForm et data-ajax = "false" devrait être inclus dans la balise href qui renvoie à signupForm.

Codage heureux

Kuppuram

0
Kuppuram

Vérifiez ce code:

$( document ).delegate("#pageid", "pageinit", function() {  
    console.log('PAGEINIT');    
});
0
stay_hungry