Changing date-attribute value does not work with Jquery

Question

Follows code:

JS:

$("#id_notification_count").data("count", 10);

Html:

<a class="dropdown-toggle">
    <i id="id_notification_count" data-count="3" class="glyphicon glyphicon-bell notification-icon"></i>
</a>

JS code should work ... and here’s an example in jsfiddle here.

Because the line $("#id_notification_count").data("count", 10); doesn’t work ?

Answer 1

The data-custom are special attributes defined by HTML5, but as whatever element they can store only strings.

On the other hand, jQuery’s internal collection, which is accessible by the method .data() can come to store whatever type of data, including complex objects with circular reference.

So for convenience, the jQuery opted to load the values of data-custom as initial values of your internal collection, but see, even at this point we have some inconsistencies.:

var valores = $(".valores");
console.log(valores.data("value"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="valores" type="hidden" data-value="A" />
<input class="valores" type="hidden" data-value="B" />
<input class="valores" type="hidden" data-value="C" />
<input class="valores" type="hidden" data-value="D" />

So the .data("value")should return "A" or ["A", "B", "C", "D"]? After all you need to remember that the jQuery is a wrapper for a collection of DOM, as long as the data-custom is to only one element DOM.

now let’s go to a case with the use of object with circular reference.:

var valores = $(".valores");
console.log(valores.data("value"));

var objetoA = {};
var objetoB = {};
objetoA.Gemeo = objetoB;
objetoB.Gemeo = objetoA;

valores.data("value", objetoA);
console.log(objetoA);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="valores" type="hidden" data-value="A" />

What value should be displayed on data-value in this case? a string with the representation of the object in JSON? this could stop the Browser ;D

Finally, the property .data() is prior to the definition of data-custom of HTML5, however the jQuery has evolved to make use of them in its implementation, even so that it is possible to create plugins with automatic boot configurable from the attributes.

In any case the JavaScript defines its own way of accessing data-custom, and this allows the editing of the.

var valores = document.querySelectorAll(".valores");
[].forEach.call(valores, function (valor, indice) {
  var valorOld = valor.dataset.value;
  valor.dataset.value = valor.dataset.value.charCodeAt(0);
  var valorNew = valor.dataset.value;
  console.log(`O elemento #${valor.id} tinha o valor ${valorOld} e foi alterado para ${valorNew}`);
});

<input id="elemA" class="valores" type="hidden" data-value="A" />
<input id="elemB" class="valores" type="hidden" data-value="B" />
<input id="elemC" class="valores" type="hidden" data-value="C" />
<input id="elemD" class="valores" type="hidden" data-value="D" />

note that when using the property dataset the value of data-custom were changed.