Discussion :

[Alem180]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[Bovino]

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).

[Alem180]

Je me sens si bête maintenant 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[devyan]

Bonjour,

Je me sens si bête maintenant 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[danielhagnoul]

Bonsoir

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

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