CODEWITHSUNDEEP
javascripthtmljqueryajax
Onun Bunun Evlari2
Onun Bunun Evlari2

Reputation: 21

Can't Update "data-attribute" Value

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?

Upvotes: 1

Views: 1062

Answers (2)

Useless Code
Useless Code

Reputation: 12422

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

Upvotes: 2

KongFB
KongFB

Reputation: 36

you need

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

Upvotes: 2

Related Questions