web-dev-qa-db-fra.com

Créez dynamiquement la page jQuery Mobile via JavaScript après avoir cliqué sur

Mon application jQuery Mobile se compose d'une seule page index.html et ne contient qu'une page avec un lien au démarrage:

<div data-role="page">
  <div data-role="content">
    <a id="startPageLink" href="startPage">start</a>
  </div>
</div>

Lorsque l'utilisateur clique sur le lien de démarrage, je souhaite charger le contenu de la variable startPage à partir de mon api JSON de manière asynchrone. Sur le rappel, j'aimerais créer tous les éléments DOM requis pour startPage via JavaScript et y ajouter le contenu. J'ai créé une méthode createStartPage(data) pour cela.

Quelle est la bonne façon d'implémenter de telles pages créées dynamiquement, de sorte que l'ouverture de index.html#startPage fonctionne également? Je pense qu'il devrait y avoir un moyen de se connecter à $.mobile.changePage() pour inclure un code de chargement/création de page personnalisé, mais je n'ai rien trouvé. Ou existe-t-il une meilleure solution à ce problème?

javascriptjquerynavigationjquery-mobile
21
Witek

J'ai eu le temps de perdre mon temps avec ça et j'ai trouvé une solution qui fonctionne (testée).

QUELQUES NOTES:

  1. le javascript encapsulé dans $ (document) .ready (); est destiné à créer dynamiquement une page si l'utilisateur accède à votre fichier index.html avec un hachage déjà ajouté (c'est-à-dire index.html # some_hash_mark).
  2. La fonction create_page (page_id) sert à créer une page à partir d'un lien (ou par programmation si vous le souhaitez).
  3. Notez que le script principal jquery et le css mobile jquery sont chargés avant l’instruction $ (document) .ready () mais que le script mobile jquery est chargé après.
  4. Vérifiez que la balise body a reçu un identifiant qui est référencé lors de l'ajout de pages à celle-ci.

Exemple de document 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

    //check if hash exists and that it is not for the home screen
    if (window.location.hash != '' && window.location.hash != '#page_0') {

        //set whatever content you want to put into the new page
        var content_string = 'Some ' + window.location.hash + ' text...<br><br><a href="#page_0">go to home screen</a>';

        //append the new page onto the end of the body
        $('#page_body').append('<div data-role="page" id="' + window.location.hash.replace('#','') + '"><div data-role="content">' + content_string + '</div></div>');

        //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
        $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + window.location.hash.replace('#','') + '">go to ' + window.location.hash.replace('#','') + ' page</a>');
    }
});
function create_page(page_id) {

    //set whatever content you want to put into the new page
    var string = 'FOO BAR page...<br><br><a href="#page_0">return to home screen</a>';

    //append the new page onto the end of the body
    $('#page_body').append('<div data-role="page" id="' + page_id + '"><div data-role="content">' + string + '</div></div>');

    //initialize the new page 
    $.mobile.initializePage();

    //navigate to the new page
    $.mobile.changePage("#" + page_id, "pop", false, true);

    //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
    $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + page_id + '">go to ' + page_id + ' page</a>');

    //refresh the home screen so new link is given proper css
    $('#page_0 div[data-role="content"]').page();
}
</script>
<title>Fixed Headers Example</title>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

</head>

<body id="page_body">
<div data-role="page" id="page_0">
<div data-role="content">Some #page_0 text...<br><br><a href="javascript: create_page('foo_bar_page');">create new page</a></div>
</div>


</body>
</html>
23
Jasper

Voici ma méthode pour ajouter dynamiquement du contenu à mes sites Web Jquery Mobile:

  1. Tout d'abord, je crée un "wrapper" data-role = page div comme suit:

    <div data-role="page" id="my_page_id">
<div data-role="content">
    <script>
    $('#my_page_id').live('pageshow', function() {
        my_data_loading_function('my_page_id');
    });
    </script>
<div id="my_page_id-content"></div>
</div><!--/content-->
</div><!--/page-->

  2. Ensuite, je charge les données d'une source externe dans une balise div située dans ma page "wrapper": 

    function my_data_loading_function(page) {
    if ($('#' + page + '-content').is(':empty')) {
        $.mobile.pageLoading();
        $('#' + page + '-content').load("my_external_script.php", function() {
            $.mobile.pageLoading(true);
            $('#' + page + '-content ul').listview();
            $('#' + page + '-content ul').page();
        });
    }
}

Quelques notes:

  • $ .mobile.pageLoading (); et $ .mobile.pageLoading (true); affiche et masque (respectivement) le spinner de chargement de Jquery Mobile.

  • if ($ ('#' + page + '-content'). is (': empty')) {permet à l'utilisateur de naviguer en dehors de la page créée dynamiquement et de revenir ensuite sans avoir à recharger les données jusqu'à ce que une actualisation complète de la page a lieu.

  • Ma page créée de façon dynamique incluait principalement une liste. Listview () oblige donc jQuery Mobile Framework à actualiser la liste sélectionnée pour ajouter le css approprié. Page () effectue la même chose avec les autres éléments de la page. Cependant, il se peut que vous n’ayez besoin d’utiliser que l’un ou l’autre en fonction de votre contenu (ou pas du tout si c’est du texte brut).

  • Je réalise que cela ne crée pas une page entière de manière dynamique car la page "wrapper" est déjà codée en dur, mais si vous souhaitez ajouter une nouvelle page, vous pouvez probablement utiliser quelque chose comme: (non testé)

    $(document).append('<div data-role="page" id="my_page_id"><div data-role="content">FOO BAR</div></div>');
$('#my_page_id').page();

Si vous voulez vraiment que tout soit créé dynamiquement, vous pouvez vérifier window.location.hash et créer votre data-role = page div avec l'id défini en tant que window.location.hash.

J'utilise aussi Jquery 1.6 et Jquery Mobile 1.0a4.1

J'espère que quelque chose peut aider quelqu'un là-bas :)

4
Jasper

Pour moi, la solution Jasper ne fonctionne pas mais j'ai trouvé cette solution qui a l'air plus propre et fonctionne bien

4
wezzy

Avez-vous examiné la méthode de chargement ajax de jquery? On dirait que vous pourriez simplement le charger de la page que vous voulez et remplacer le corps à chaque fois que vous recevez une demande.

référence

0
RyanJM

Dans cet exemple sur JSFiddle, je prends un appel d'API de Flickr et l'exécute via le moteur jquery tmpl pour ajouter la nouvelle page au document, puis appelle $ .mobile.changePage () à la nouvelle page insérée. Je pense que vous verrez à quel point l’appariement jquery tmpl + apis + jquery mobile est utile. 

http://jsfiddle.net/sgliser/8Yq36/5/

0
sgliser