jquery mobile - chargement de contenu dans un div

Question

Jquery Mobile fonctionne en "piratant" une page et en chargeant du contenu et en l'injectant dans la page.

Il semble que cela crée un problème lorsque j'essaie d'injecter d'autres contenus dans la page.

J'ai mon index.html et un fichier page2.html. J'installe mobile jquery de façon normale envelopper le contenu de chaque page dans un div comme ceci:

<div id="container" data-role="page"> 
    // my content 
<a href="page2.html">go to page 2</a> 
</div> 

lorsque les robinets des utilisateurs vont à la page 2, il fait le bel effet de diapositive. L'URL dans la barre d'adresse ressemble à ceci: index.html # page2.html

jquery mobile injecte le contenu de la page en utilisant les ancres et applique la transition. sympa, donc tout va bien jusqu'à la prochaine partie.

Sur page2.html, j'ai une section qui charge des données externes et l'injecte dans un div.

<a href="http://www.somedomain.com/myata.php" class="ajaxtrigger" data-role="none">mydata</a> 
<div id="target"></div> 
<script src="js/code.js"></script> 
<script src="js/loader.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.ajaxtrigger').trigger('click'); 
}); 
</script> 

Le problème que j'ai est que lorsque je les transitions activer mobile jquery ce script ne fonctionne pas. Il ne chargera pas les données dans le div. Dommage. Est-ce que quelqu'un sait ce que je dois faire pour le déclencher et charger le contenu dans ce div?

Answer 1

Essayez-vous d'utiliser $(document).ready(function(){ $('.ajaxtrigger').trigger('click'); }); pour capturer le clic/tapoter sur page2 dans index.html, puis insérer des données dans page2.html?

Si tel est le cas, cela ne fonctionnera pas, car vous ne pouvez pas transmettre des données entre les pages de cette manière. Essayez de donner div principale de page2.html un id de #page2 et utiliser la méthode pagebeforeshow (http://jquerymobile.com/test/#/test/docs/api/events.html)

$('div#page2').live('pagebeforeshow',function(event, ui){ 
    $('div#page2 div#ajax_loaded_content').load('url_to_load_from.php'); 
}); 

Answer 2

Je vais avoir un problème similaire (comme mentionné dans le commentaire ci-dessus) et je l'ai juste compris (au moins pour moi). Lorsque jQuery Mobile charge la page suivante via ajax, il conserve la page précédente dans le DOM afin que le bouton de retour fonctionne correctement. Le problème est maintenant que si vous utilisez javascript sur la deuxième page pour référencer l'un des éléments DOM (en particulier par ID), vous devez prendre en compte que les éléments de la page précédente sont toujours dans le DOM. Puisque les ID sont conçus pour être uniques, document.getElementById() n'est pas aussi fiable et donc $("#myDiv") ne l'est pas non plus. Ce que je viens de faire est de référencer les éléments DOM par nom de classe (par exemple $(".myDivClass")) car les classes css sont conçues pour ne pas être uniques et cela semble faire l'affaire. L'effet secondaire est que tous les changements que vous faites en javascript seront également effectués sur toutes les pages cachées, mais cela fera l'affaire. Une autre idée qui me vient à l'esprit lorsque je tape ceci est de donner à chaque <div data-role="page"> un identifiant unique et à partir de maintenant des éléments de requête en utilisant $("#myUniquePage #myInnerDiv") au lieu de $("#myInnerDiv").

Espérons que cela aide.

Answer 3

Essayez ceci:

$('page2.html').bind('pageshow', function() { 
    $('.ajaxtrigger').trigger('click'); 
}); 

Answer 4

Une autre option serait de générer un identifiant unique pour l'élément DOM que vous souhaitez manipuler sur chaque chargement de page, de sorte que vous n'avez pas le problème avec ids double qu'Adam décrit.Je l'ai fait en C# (avec la syntaxe Razor) comme suit:

@{ string headerAutoGenSym = "header_" + new System.Random().Next(1000000000); } 
@section header 
{ 
    <div id="@headerAutoGenSym"></div> 

    <script type="text/javascript"> 
     $(function() { 
      $(document).bind("pageinit", function() { 
       $.get(
        '@Url.Action("myAjaxURL")', 
        function (data) { 
         $('#@headerAutoGenSym').append(data); 
        } 
       ); 
      }); 
     }); 
    </script> 
}