web-dev-qa-db-fra.com

jQuery mobile $ (document) .ready équivalent

dans les pages de navigation ajax, le formulaire classique "document prêt" permettant d'effectuer l'initialisation en JavaScript ne se déclenche tout simplement pas.

Quelle est la bonne façon d'exécuter du code dans une page chargée avec ajax?

(Je veux dire, pas mon ajax ... c’est le système de navigation par page de jquery mobile qui m’amène à cette page)

Ok, je soupçonnais quelque chose comme ça ... merci beaucoup =) Mais ... ça ne marche toujours pas, voici mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mypage</title>

    <link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" />
    <script type="text/javascript" src="jquery-1.5.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script>
    <script type="text/javascript">
        $('div').live('pageshow',function(event, ui){
          alert('ciao');
        });
    </script>

</head>

<body>

    <div data-role="page">

        <div data-role="header" data-position="fixed">
            <h1>Shopping Cart</h1>
        </div>

        <div data-role="content"> asd


        </div>

    </div>

</body>

Dois-je spécifier l'identifiant div?

ajaxjquery-mobiledocument-ready
24
Fabio B.

J'ai passé un peu de temps sur les mêmes recherches car les documents JQM ne sont pas très détaillés à ce stade. La solution ci-dessous fonctionne bien pour moi:

<script type="text/javascript">
$('div:jqmData(role="page")').live('pagebeforeshow',function(){
    // code to execute on each page change
});
</script>

Vous devez implémenter votre propre flux de vérification afin d'éviter toute initialisation multiple, car le code ci-dessus sera exécuté à chaque changement de page.

19
Jura Khrapunov

Lier à l'événement "pageinit". D'après les documents JQM: http://api.jquerymobile.com/pageinit/

14
Crashalot

Le meilleur équivalent de $(document).ready() est $(document).bind('pageinit')

Jetez un coup d’œil à la documentation de jQuery Mobile: http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Important: Utilisez $ (document) .bind ('pageinit'), pas $ (document) .ready ()

La première chose que vous apprenez dans jQuery est d’appeler le code dans le fichier La fonction $ (document) .ready () afin que tout s’exécute dès que le fichier DOM est chargé. Cependant, dans jQuery Mobile, Ajax est utilisé pour charger le fichier contenu de chaque page dans le DOM lorsque vous naviguez et le DOM prêt gestionnaire s’exécute uniquement pour la première page. Pour exécuter du code chaque fois qu'un Une nouvelle page est chargée et créée, vous pouvez vous lier à l'événement pageinit . Cet événement est expliqué en détail au bas de cette page.

12
Random78952

Si vous voulez que le code soit exécuté sur une certaine page (je parie que c'est le cas), vous pouvez utiliser ce modèle:

$('div:jqmData(url="thepageyouwanted.html")').live('pageshow',function(){
    // code to execute on that page
    //$(this) works as expected - refers the page
});

Les événements que vous pouvez utiliser:

  • pagebeforeshow commence juste avant la transition
  • pageshow commence juste après la transition
  • pagecreate commence seulement la première fois que la page est chargée
5
naugtur

Tous les pageshow et pages avant event sont appelés chaque fois qu’ils sont affichés. Si vous voulez quelque chose qui se passe la première fois, vous pouvez faire quelque chose comme ceci:

  $('#pageelementid').live("pagecreate", pageInitializationHandler);

Puis plus tard dans votre code:

  function pageInitializationHandler(event) {
      //possibly optional based on what exactly you're doing,
      //but keep it in mind in case you need it.
      //Also, this seems to need to be an exact duplicate of the
      //way you used it with the .live() method or jQ/jQM won't unbind
      //the right thing
      $('#pageelementid').die("pagecreate", pageInitializationHandler);

      //Do your actual initialization stuff
  }

J'ai trouvé cela particulièrement utile lorsque vous créez des fichiers HTML contenant plusieurs "pages" JQM. J'ai mis le mien en place de sorte que le code d'initialisation réel de l'ensemble du Shebang se trouve dans ma page principale (du fichier), puis toutes les autres sous-pages ont un gestionnaire pagecreate qui vérifie si le code d'initialisation s'est déclenché et si une $ .mobile.changePage ("# page principale"). Fonctionne assez bien.

3
Joe Bedurndurn

Comme mentionné, l'événement pageinit fonctionne. Cependant, si vous avez eu le cas d'une situation de page multi-physique (par exemple: navigation d'index.html à mypage.html), la fonction qui est exécutée est sur le parent.

Toute logique dans le pageinit devrait être quelque chose appartenant au parent, pas le lien en cours de chargement. Vous ne pouvez pas appeler une fonction sur la page sur laquelle vous naviguez car la navigation est gérée via un rappel ajax dans JQM et les éléments de votre page enfant seraient hors de portée.

Dans ce cas particulier, vous pouvez utiliser l'attribut data-ajax = "false":

<a href="mypage.html" data-ajax="false">My Page</a>

Cela enlèvera la navigation ajax, fera un rechargement de page complète, ce qui déclenchera à son tour une fonction $ (document) .ready sur la page que vous chargez.

1
Justin Saraceno

C'est relativement simple. Je pense que je comprends votre problème, vous voulez que cet événement soit déclenché une seule fois et non à plusieurs reprises, n'est-ce pas? Si c'est le cas, faites-le comme ça 

$(document).one('pageinit', function(){ // write your code here })

Dans ce cas, le 'pageinit' se produira une fois. Si vous voulez en savoir plus sur la méthode one() jQuery, cochez ici

0
Nicholas Mberev