Modèle JQuery Mobile qui utilise un panneau latéral. Par souci de simplicité, je souhaite pouvoir charger ce panneau à partir d’un document séparé / d’une page externe, de sorte qu’il puisse être construit une seule fois et utilisé sur de nombreuses pages.

Un peu de recherche m’a amené à obtenir le code suivant pour charger une chaîne de code HTML dans une variable, puis à charger cette variable dans chaque page en tant que panneau latéral:

/* Get the sidebar-panel as a var */ var side_var = '
Panel
stuff
'; /* Load the side-panel var to the DOM / page */ $(document).one('pagebeforecreate', function () { $.mobile.pageContainer.prepend( side_var ); $("#left-panel").panel(); }); 

Cela fonctionne parfaitement, mais cela n’aborde toujours pas la nécessité de construire la barre latérale / le panneau en tant que fichier html séparé.

• La chaîne dépasse maxJsonLength avec moins de 250 Ko
• Barre latérale flottante avec jQuery
• JS ne fonctionne pas lors du premier chargement de page HTML
• Vérification de la longueur maximale de Textarea
• $ Provide.decorator $ Le renvoi du contrôleur non défini n’est pas une fonction angularjs

Un peu plus de travail et j’ai découvert cet extrait pour charger une page dans une variable:

 $.get("http://www.somepage.com", function( side_var ) {}, 'html'); 

Donc, en théorie, l’ajout des deux devrait donner le résultat souhaité;

 /* Get the sidebar-panel as a var */ $.get("mypage.html", function( side_var ) {}, 'html'); /* Load the side-panel var to the DOM / page */ $(document).one('pagebeforecreate', function () { $.mobile.pageContainer.prepend( side_var ); $("#left-panel").panel(); }); 

Cependant, tout ce que je reçois en exécutant ceci est un chargeur AJAX à rotation éternelle.

Qu’est-ce qui me manque et / ou je fais mal?

SOLUTION COMPLETE

La solution d’Omar ci-dessous va presque tout à fait, mais nécessite un ajout mineur mais important pour que les éléments JQM s’affichent comme prévu. Voici la solution complète:

 $(document).one("pagebeforecreate", function () { $.get('side-panel.html', function(data) { //$(data).prependTo($.mobile.pageContainer); //or .prependTo("body"); $.mobile.pageContainer.prepend(data); $("[data-role=panel]").panel().enhanceWithin(); // initialize panel }, "html"); }); 

Chaque élément à améliorer en tant qu’élément JQM nécessite l’ajout du thème de données pour lui indiquer le thème à utiliser. De plus, dans le .enhanceWithin() JavaScript, le widget de panneau initialisé doit: .enhanceWithin() pour que les éléments soient restitués avec le style souhaité.

• Comment restr dans l’onglet sélectionné après le rechargement de la page
• Jquery (‘#iframeid’). Load () est exécuté avant le chargement du contenu Iframe CONTENT (texte, images).
• Effectuer un paiement Ssortingpe avec Jquery AJAX? (Javascript seulement)
• Comment incrémenter / décrémenter les valeurs de couleur hexadécimales avec javascript / jQuery
• Evénement de clic jQuery ne fonctionnant pas IE7 et IE8

 $(document).one("pagebeforecreate", function () { $.get('mypage.html', function(data){ $(data).prependTo("body"); // or .prependTo($.mobile.pageContainer); $("[data-role=panel]").panel(); // initialize panel }, "html"); });