Forcer jQuery Mobile à réévaluer les styles/thèmes sur du contenu inséré dynamiquement
Objectif: Charger le contenu HTML via $.ajax, l'insérer dans le DOM, faire en sorte que jQuery Mobile lui applique les styles de thème.
Problème: Le contenu est inséré mais manque de thématisation jQuery Mobile.
Code:
$.ajax({
...
success: function(html) {
$('#container').append(html);
$('#page').page('refresh', true);
}
});
Le code HTML renvoyé inclut les balises data-role que jQM doit styler ...
<a data-role="button">Do Something</a>
Au lieu d'appliquer les styles comme il se doit, j'obtiens l'erreur suivante:
exception non interceptée: pas de méthode de ce type 'actualiser' pour l'instance de widget de page
Code ci-dessus testé avec http://code.jquery.com/mobile/latest/jquery.mobile.js
Des questions similaires qui m'ont amené au message d'erreur ci-dessus:
Mettez régulièrement à jour la page avec les styles jQuery Mobile appropriés
Vient de recevoir une réponse à une question similaire, essayez d'utiliser
.trigger("create")
sur l'élément qui obtient le contenu ajouté à.
Voir ici: jQuery Mobile n'applique pas de styles après l'ajout dynamique de contenu
Si vous ajoutez des éléments à une liste, vous devez appeler la méthode refresh () pour mettre à jour les styles et créer les listes imbriquées ajoutées. Par exemple:
$('#mylist').listview('refresh');
Si vous devez rendre une page dynamique, veuillez lire: " jQuery Mobile et Génération de pages dynamiques ". Exemple de code de cet article:
// Load the data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showCategory( urlObj, options )
{
var categoryName = urlObj.hash.replace( /.*category=/, "" ),
// Get the object that represents the category we
// are interested in. Note, that at this point we could
// instead fire off an ajax request to fetch the data, but
// for the purposes of this sample, it's already in memory.
category = categoryData[ categoryName ],
// The pages we use to display our content are already in
// the DOM. The id of the page we are going to write our
// content into is specified in the hash before the '?'.
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
if ( category ) {
// Get the page we are going to dump our content into.
var $page = $( pageSelector ),
// Get the header for the page.
$header = $page.children( ":jqmData(role=header)" ),
// Get the content area element for the page.
$content = $page.children( ":jqmData(role=content)" ),
// The markup we are going to inject into the content
// area of the page.
markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
// The array of items for this category.
cItems = category.items,
// The number of items in the category.
numItems = cItems.length;
// Generate a list item for each item in the category
// and add it to our markup.
for ( var i = 0; i < numItems; i++ ) {
markup += "<li>" + cItems[i].name + "</li>";
}
markup += "</ul>";
// Find the h1 element in our header and inject the name of
// the category into it.
$header.find( "h1" ).html( category.name );
// Inject the category items markup into the content element.
$content.html( markup );
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Enhance the listview we just injected.
$content.find( ":jqmData(role=listview)" ).listview();
// We don't want the data-url of the page we just modified
// to be the url that shows up in the browser's location field,
// so set the dataUrl option to the URL for the category
// we just loaded.
options.dataUrl = urlObj.href;
// Now call changePage() and tell it to switch to
// the page we just modified.
$.mobile.changePage( $page, options );
}
}
Si vous utilisez la méthode ajax pour charger du contenu, voici comment j’ai fait fonctionner les fonctionnalités de styling et de jquery mobile. C'est à peu près la même chose que la suggestion ci-dessus mais pour certaines personnes, vous aimez probablement voir un exemple plus complet.
Voici le code:
$.ajax({
url: 'url.php',
success: function(data) {
$("#div").html(data).trigger('create');
}
});
Pour mettre à jour les réponses fournies. À partir de la version 1.4, vous pouvez sélectionner votre contenu et utiliser .enhanceWithin() pour améliorer les éléments enfants.
$('.selector').trigger('create'); semble être la meilleure approche, voir le FAQ officiel ci-dessous:
http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php
Dans jQuery Mobile Framework alpha4.1 et versions antérieures, cette opération a été effectuée à l'aide de la méthode .page().
Exemple pour montrer qu'il n'y a pas beaucoup de différence:
$( ... lots of HTML ...).appendTo(".ui-content").page();
Plus d'infos: http://jquerymobiledictionary.dyndns.org/faq.html
Pourquoi la nouvelle méthode (voir la réponse de T. Stone) a-t-elle été introduite? .page() a été écrit avec une hypothèse que l'élément DOM n'était pas amélioré auparavant.
Dans l’intérêt du découplage, l’équipe de jQuery Mobile introduit une amélioration basée sur les événements qui permettra non seulement de déclencher l’événement, mais également de créer de nouveaux widgets pour les nouveaux data-roles sans modifier le code de la méthode .page de JQM.
Pour les autres à la recherche d'une réponse à cette question, à compter du 09/06/2011, l'équipe mobile de jQuery a implémenté cette fonctionnalité dans une branche de développement. Selon ce numéro, cela fonctionnera dans ce manoir:
$(".ui-content").append( ... lots of HTML ...).trigger( "enhance" );