Aucun effet de .data()

Bonjour,

Pardonnez moi si je poste au mauvais endroit mais lors d'une requête AJAX, je récupère un fichier JSON et souhaite appliquer son contenu sur un ensemble de liens. Entre autres, changer les classes, changer le title et changer data-contenu. Ce dernier est utilisé par mon CSS pour faire des notifications.
Seulement voilà, toutes les modifications sont appliquées sauf celle concernant le data.

Voici mon code :

Code:

---

1 2 3 4 5 6 7 8 9

if ($("#notifications").length > 0) { $.getJSON("./ajax/notifications.json", function (data) { // Ce fichier est généré par du php, c'est une simple redirection .htaccess $.each(data, function (index, valeur) { console.log($("#notification-" + index).data("contenu")); // Pour voir si il y a un problème $("#notification-" + index).removeClass("erreur").addClass(valeur.class).data("contenu", valeur.contenu).prop("title", valeur.title); // Les mises à jour console.log($("#notification-" + index).data("contenu")); // Idem que 2 lignes plus haut }); }); }

---

Ma console affiche correctement les modifications avant-après : "00" -> "06", "00" -> "05"... Mais au niveau HTML, aucun changement, c'est à ne rien y comprendre :O
On passe de :

Code:

---

<a href="#" id="notification-sujets" data-contenu="00" class="notification transition erreur" title="Votre navigateur ne supporte pas le JavaScript"><i class="icon-th-list icon-large"></i></a>

---

à

Code:

---

<a href="#" id="notification-sujets" data-contenu="00" class="notification transition" title="6 nouveau(x) messages postés"><i class="icon-th-list icon-large"></i></a>

---

Quelqu'un peut m'éclairer ? Serait-ce une erreur stupide dûe à un programmeur amateur en manque de sommeil ou bien ?
Merci d'avance :)

Citation:

---

Mais au niveau HTML, aucun changement

---

Comment fais-tu la vérification ?
Au niveau du code source de la page récupéré via CTRL+U par exemple, c'est normal, les modifications ne sont pas répercutées. C'est au niveau de la console qu'il faut regarder (F12 onglet HTML).

Je me sens si bête maintenant 8O j'avais complètement oublié le fonctionnement des datas et de data()..

Mais comme je tiens à avoir un html valide, je tiens pas à m'amuser à créer des attributs customs ou à en détourner des valides alors j'ai pensé à utiliser

Code:

---

1 2 3

.attr("data-contenu", valeur.contenu) // au lieu de : .data("contenu", valeur.contenu)

---

puisque la répercussion sur le HTML est nécessaire dans mon cas puisque c'est le css qui affiche le contenu comme suit :

Code:

---

1 2 3 4 5 6 7 8

.notification:after { content: attr(data-contenu); padding: 1px 2px; font-weight: 700; font-size: 12px; color: white; background-color: dodgerblue; }

---

mais je me pose la question concernant cette pratique, j'ai lu je ne sais où que ce type de fonctionnement n'était pas recommandé, tu pourrais m'éclairer là dessus ?

En tout cas merci bien pour ta réponse :)

Bonjour,

Citation:

---

Envoyé par Alem180

Je me sens si bête maintenant 8O j'avais complètement oublié le fonctionnement des datas et de data()..

Mais comme je tiens à avoir un html valide, je tiens pas à m'amuser à créer des attributs customs ou à en détourner des valides alors j'ai pensé à utiliser

Code:

---

1 2 3

.attr("data-contenu", valeur.contenu) // au lieu de : .data("contenu", valeur.contenu)

---

---

J'ai un gros doute sur la compatibilité entre $element.data() de jQuery et le element.data() de HTML5 ...
Tu vas être obligé de passer par $element.attr("data-contenu", valeur.contenu) ou par $element.get(0).data("contenu") = valeur.contenu

Bonsoir

Je viens d'écrire une nouvelle Q/R pour la :faq:

:fleche: Comment puis-je modifier le style des pseudo-éléments ?