jQuery Mobile n'applique pas de styles après l'ajout dynamique de contenu
je sais que ces questions apparaissent à plusieurs endroits ( forçant jQuery Mobile à réévaluer les styles/thèmes sur le contenu dynamiquement inséré ) mais pas avec une réponse qui fonctionne pour moi.
je charge du contenu en utilisant ajax, et en l'insérant dans un div comme ceci:
$.ajax({
url: "../Services/CalendarService.cshtml?service=true",
cache: false,
success: function (data) {
data = $.parseJSON(data);
var s = $("#user_tmpl").html();
var s1 = tmpl(s, data);
$("#target").html(s1);
$("#targetRefresh").page();
}
});
j'ai essayé de définir le targetRefresh à la fois sur la cible à laquelle j'ajoute le html, et sur la page, mais sans succès. Le conent est inséré, mais le style n'est pas appliqué.
j'ai aussi essayé
.trigger("enhance")
une idée de ce qu'il faut faire?
le html qui a inséré sont un tas de ceux-ci:
<div data-theme="e" data-collapsed="true" data-role="collapsible"> <h3>MyOwner2AA</h3> <p>MyDescription</p> <p>/Date(1320339836735)/</p> <p>MyOwner</p> <i></i> </div>
Merci pour toute aide
Larsi
4 réponses
essayez d'appeler .trigger("create") sur l'élément avec le nouveau contenu.
selon le jQuery Mobile docs , "l'événement create est adapté pour améliorer la marge brute qui contient un ou plusieurs widgets."
EDIT : à partir de jQuery Mobile 1.4, .trigger('create') est déprécié , et vous devez utiliser .enhanceWithin() à la place. (Merci à John Mc pour le tuyau.)
cela a fonctionné pour moi pour la vue de liste
$('ul').listview('refresh');
vous pouvez aussi rafraîchir le repliable
$('#element').collapsibleset('refresh')
quand j'ai essayé les solutions ci-dessus, j'ai reçu un message d'erreur dans Firebug
exception non tirée: impossible d'appeler les méthodes listview avant l'initialisation; tentative d'appeler la méthode 'refresh '
j'ai trouvé une solution pour cela cependant, au lieu d'appeler .trigger("create") après l'ajout des nouveaux éléments que j'ai appelé
$("ul").listview();
à la fin de la fonction de rappel ajax.
Cela fait tout fonctionne parfaitement pour moi. Espérons que cela aide.
pour ceux qui l'ont manqué ci-dessus, pour appliquer de nouveau les styles JQM après avoir ajouté du contenu de façon dynamique, faites ceci:
$('.myelement').html( myHtmlStr ).enhanceWithin();