Can't Update "data-attribute" Value

Question

The upload bar needs to be updated and i think everything is true but I can not update the data-value.

HTML Code:

<div id="Result_Success" class="progress-Bar" data-value="0"></div>

Javascript:

success: function (response) {
      $("#Result_Success").data('value', response["yuzdelik"]);
}

Where is the mistake?

Though the currently accepted answer (*KongFB*'s one) is technically not wrong, the one of *Useless Code* should be considered the accepted one for it uses the `dataset` property which was introduced for exactly this purpose ... "reading from" and "writing to" element-node related data-values. — Peter Seliger, Jul 03 '23 at 13:28

score 1 · Accepted Answer · answered Dec 25 '17 at 19:08

1

you need

javascript $("#Result_Success").attr('data-value', response["yuzdelik"]);

answered Dec 25 '17 at 19:08

KongFB

26
5

score 1 · Answer 2 · answered Dec 25 '17 at 20:39

Another approach is to access the element's dataset property directly to change it. To do so, you need to get a reference to the raw DOM node, not wrapped by a jQuery object. You can get the raw DOM node by using jQuery's get method $("#Result_Success").get(0), or using jQuery's array-like nature using $("#Result_Success")[0], as I do in the example below.

function setResponse (response) {
      $("#Result_Success")[0].dataset.value = response["yuzdelik"];
}


let val = 0;
let timer = setInterval(function () {
    setResponse({yuzdelik: val});
    if (val >= 100) {
      clearInterval(timer);
    } else {
      val += 25;
    }
  }, 500);

#prog {
  border: 1px #000 solid;
}
#Result_Success {
  height: 20px;
  background: #0f0;
}

#Result_Success[data-value="0"] {
  width: 0%;
}

#Result_Success[data-value="25"] {
  width: 25%;
}

#Result_Success[data-value="50"] {
  width: 50%;
}

#Result_Success[data-value="75"] {
  width: 75%;
}

#Result_Success[data-value="100"] {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prog">
<div id="Result_Success" class="progress-Bar" data-value="0"></div>
</div>

The reason that using $("#Result_Success").data() doesn't work is that it does not actually modify data- attributes. jQuery stores data set with .data inside itself. jQuery does this instead of modifying the element attributes to avoid circular references. Circular references on DOM elements aren't really a big deal these days, but back when IE was more relevant they were, because in older versions of IE (especially IE6) they would cause memory leaks when you removed the element from the DOM.

It can get a little confusing that this is what it is actually doing because jQuery will pull any data- attributes into its own internal data. The documentation states:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

@OnunBununEvlari2 ... Though the currently accepted answer (*KongFB*'s one) is technically not wrong, the above one should be considered the accepted one for it uses the `dataset` property which was introduced for exactly this purpose ... "reading from" and "writing to" element-node related data-values. — Peter Seliger, Jul 03 '23 at 13:27

Can't Update "data-attribute" Value

2 Answers2