Impossible de définir l’atsortingbut de données à l’aide de l’API jQuery Data ()

J’ai le champ suivant dans une vue MVC:

@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" }) 

Dans un fichier js séparé, je veux définir l’atsortingbut data-helptext sur une valeur de chaîne. Voici mon code:

 alert($(targetField).data("helptext")); $(targetField).data("helptext", "Testing 123"); 

L’appel alert() fonctionne correctement, il affiche le texte “Old Text” dans une boîte de dialog d’alerte. Toutefois, l’appel pour définir l’atsortingbut data-helptext sur “Testing 123” ne fonctionne pas. “Ancien texte” est toujours la valeur actuelle de l’atsortingbut.

Est-ce que j’utilise l’appel à data () de manière incorrecte? J’ai regardé ça sur le web et je ne vois pas ce que je fais mal.

Voici le balisage HTML:

  

Il est mentionné dans la documentation .data()

Les atsortingbuts de données sont extraits lors du premier access à la propriété data et ne sont plus accessibles ou mutés (toutes les valeurs de données sont ensuite stockées en interne dans jQuery)

Cela a également été abordé sur Pourquoi les modifications apscopes à jQuery $ .fn.data () ne mettent-elles pas à jour les atsortingbuts html 5 data- * correspondants?

La démo de ma réponse originale ci-dessous ne semble plus fonctionner.

Réponse mise à jour

Encore une fois, à partir de la documentation .data()

Le traitement des atsortingbuts avec des tirets intégrés a été modifié dans jQuery 1.6 pour être conforme à la spécification HTML5 du W3C.

Donc, pour

ce qui suit est vrai $('div').data('role') === 'page'

Je suis presque certain que $('div').data('data-role') fonctionnait dans le passé, mais cela ne semble plus être le cas. J’ai créé une meilleure visortingne qui se connecte au HTML plutôt que d’avoir à ouvrir la console et a ajouté un exemple supplémentaire de la conversion multi-trait d’union à camelCase.

Démo mise à jour (2015-07-25)

Voir aussi Données jQuery vs Attr?

HTML

 
SetterGetterResult of calling getterNotes

JavaScript (jQuery 1.6.2+)

 var $changeMe = $('#changeMe'); var $log = $('#log'); var logger; (logger = function(setter, getter, note) { note = note || ''; eval('$changeMe' + setter); var result = eval('$changeMe' + getter); $log.append('' + setter + '' + getter + '' + result + '' + note + ''); })('', ".data('key')", "Initial value"); $('#changeData').click(function() { // set data-key to new value logger(".data('key', 'leia')", ".data('key')", "expect leia on jQuery node object but DOM stays as luke"); // try and set data-key via .attr and get via some methods logger(".attr('data-key', 'yoda')", ".data('key')", "expect leia (still) on jQuery object but DOM now yoda"); logger("", ".attr('key')", "expect undefined (no attr key)"); logger("", ".attr('data-key')", "expect yoda in DOM and on jQuery object"); // bonus points logger('', ".data('data-key')", "expect undefined (cannot get via this method)"); logger(".data('anotherKey')", ".data('anotherKey')", "jQuery 1.6+ get multi hyphen data-another-key"); logger(".data('another-key')", ".data('another-key')", "jQuery < 1.6 get multi hyphen data-another-key (also supported in jQuery 1.6+)"); return false; }); $('#changeData').click(); 

Démo plus ancienne


Réponse originale

Pour ce HTML:

 
change data value

et ce JavaScript (avec jQuery 1.6.2)

 console.log($('#foo').data('helptext')); $('#changeData').click(function() { $('#foo').data('helptext', 'Testing 123'); // $('#foo').attr('data-helptext', 'Testing 123'); console.log($('#foo').data('data-helptext')); return false; }); 

Voir la démo

Utilisation de la console Chrome DevTools pour inspecter le DOM, les données $('#foo').data('helptext', 'Testing 123'); ne met pas à jour la valeur telle qu’elle apparaît dans la console, mais $('#foo').attr('data-helptext', 'Testing 123'); Est-ce que.

J’avais de sérieux problèmes avec

 .data('property', value); 

Il ne définissait pas l’atsortingbut data-property .

Commencez à utiliser le .attr() de jQuery:

Obtenez la valeur d’un atsortingbut pour le premier élément de l’ensemble d’éléments correspondants ou définissez un ou plusieurs atsortingbuts pour chaque élément correspondant.

 .attr('property', value) 

pour définir la valeur et

 .attr('property') 

pour récupérer la valeur.

Maintenant ça marche!

La réponse acceptée par @ andyb a un petit bug. Suite à mon commentaire sur son post ci-dessus …

Pour ce HTML:

 
change data value

Vous devez accéder à l’atsortingbut comme ceci:

 $('#foo').attr('data-helptext', 'Testing 123'); 

mais la méthode de données comme ceci:

 $('#foo').data('helptext', 'Testing 123'); 

Le correctif ci-dessus pour la méthode .data () empêchera “non défini” et la valeur de données sera mise à jour (alors que le HTML ne sera pas)

Le sharepoint l’atsortingbut “data” est de lier (ou “lier”) une valeur avec l’élément. Très similaire à l’atsortingbut onclick="alert('do_something')" , qui lie une action à l’élément … le texte est inutile, vous voulez simplement que l’action fonctionne lorsqu’elle clique sur l’élément.

Une fois que les données ou l’action sont liées à l’élément, il n’y a généralement plus besoin de mettre à jour le HTML, mais uniquement les données ou la méthode, car c’est ce que votre application (JavaScript) utiliserait. En ce qui concerne les performances, je ne vois pas pourquoi vous voudriez aussi mettre à jour le code HTML, personne ne voit l’atsortingbut HTML (sauf dans Firebug ou d’autres consoles).

Une façon de penser à cela: le HTML (ainsi que les atsortingbuts) ne sont que du texte. Les données, fonctions, objects, etc. utilisés par JavaScript existent dans un plan distinct. Ce n’est que lorsque JavaScript est chargé de le faire qu’il lit ou met à jour le texte HTML, mais que toutes les données et fonctionnalités que vous créez avec JavaScript agissent de manière totalement distincte du texte / atsortingbuts HTML que vous voyez dans votre console Firebug (ou autre).

* Je mets l’accent sur d’ habitude parce que si vous avez besoin de conserver et d’exporter du HTML (par exemple, un éditeur de texte avec micro-format / données) où le HTML se chargera sur une autre page, vous devrez peut-être le mettre à jour aussi.

Est arrivé le même pour moi. Il se trouve que

 var data = $("#myObject").data(); 

vous donne un object non inscriptible. Je l’ai résolu en utilisant:

 var data = $.extend({}, $("#myObject").data()); 

Et à partir de là, les data étaient un object JS inscriptible standard.

Pour citer une citation:

Les atsortingbuts de données sont extraits lors du premier access à la propriété data et ne sont plus accessibles ou mutés (toutes les valeurs de données sont ensuite stockées en interne dans jQuery).

.data() – jQuery Documentiation

Notez que cette limitation (franchement étrange ) est uniquement refusée à l’utilisation de .data() .

La solution? Utilisez plutôt .attr .

Bien sûr, plusieurs d’entre vous peuvent se sentir mal à l’aise de ne pas utiliser sa méthode dédiée. Considérez le scénario suivant:

  • Le ‘standard’ est mis à jour pour que la portion de données des atsortingbuts personnalisés ne soit plus requirejse / soit remplacée

Bon sens – Pourquoi changeraient-ils un atsortingbut déjà établi comme ça? Imaginez simplement que la class commence par renommée en groupe et que l’ id identifie . Internet se briserait.

Et même alors, Javascript lui-même a la capacité de résoudre ce problème – Et bien sûr, malgré son incompatibilité avec HTML, REGEX (et une variété de méthodes similaires) pourrait rapidement renommer vos atsortingbuts pour ce nouveau «standard» mythique.

TL; DR

 alert($(targetField).attr("data-helptext")); 

Eu le même problème. Comme vous pouvez toujours obtenir des données en utilisant la méthode .data (), il vous suffit de trouver un moyen d’écrire sur les éléments. C’est la méthode d’assistance que j’utilise. Comme la plupart des gens l’ont dit, vous devrez utiliser .attr. Je le remplace par un – comme je le sais. Je ne suis pas au courant d’autres caractères qu’il remplace … mais je n’ai pas fait de recherche à ce sujet.

 function ExtendElementData(element, object){ //element is what you want to set data on //object is a hash/js-object var keys = Object.keys(object); for (var i = 0; i < keys.length; i++){ var key = keys[i]; $(element).attr('data-'+key.replace("_", "-"), object[key]); } } 

EDIT: 01/05/2017

J'ai trouvé qu'il y avait encore des cas où vous ne pouviez pas obtenir les données correctes en utilisant des méthodes intégrées, donc ce que j'utilise maintenant est le suivant:

 function setDomData(element, object){ //object is a hash var keys = Object.keys(object); for (var i = 0; i < keys.length; i++){ var key = keys[i]; $(element).attr('data-'+key.replace("_", "-"), object[key]); } }; function getDomData(element, key){ var domObject = $(element).get(0); var attKeys = Object.keys(domObject.attributes); var values = null; if (key != null){ values = $(element).attr('data-' + key); } else { values = {}; var keys = []; for (var i = 0; i < attKeys.length; i++) { keys.push(domObject.attributes[attKeys[i]]); } for (var i = 0; i < keys.length; i++){ if(!keys[i].match(/data-.*/)){ values[keys[i]] = $(element).attr(keys[i]); } } } return values; };