How to add jquery variable into span class attribute?

Question

I'm trying to use Barfiller (https://github.com/9bitStudios/barfiller). Everything works, but I want to set the data-percentage value in the span class (now set as "50") to be dynamically filled via a JQuery variable.

HTML

<div id="bar1" class="barfiller">
    <span class="tip"></span>
    <span class="fill" data-percentage="50"></span>
</div>

Javascript

function onQuerySucceeded(data) {
    var projectstatus = data.d.projectstatus;
    $('#data-percentage').text(projectstatus);
}

Regards, Chris

Possible duplicate of [Can't update data-attribute value](https://stackoverflow.com/questions/17762906/cant-update-data-attribute-value) ... (there is no element with a data-percentage id, but that's what you try to get with your jQuery selector) — caramba, Dec 06 '18 at 14:46
In your case, you need to use this for change `data-percentage` : `$("spam.fill").data("percentage", projectstatus);` — Shidersz, Dec 06 '18 at 14:55

Hamzeen Hameem · Answer 1 · 2018-12-06T16:06:48.183

I have added a timeout of 2 seconds before executing onQuerySucceeded() function as I thought it might be handy for you in case, you are loading the new percentage after making an api (service) call. Hope it helps you:

$(document).ready(function() {
  console.log('data percentage: ' + $(".fill").attr('data-percentage'));
  
  setTimeout(() => {
    // after 2 seconds
    var responseJson = {};
    responseJson.d = { projectstatus: 15 };
    onQuerySucceeded(responseJson);
  }, 2000);
});

function onQuerySucceeded(data) {
  $('.fill').attr("data-percentage", data.d.projectstatus);
  console.log('data percentage: ' + $(".fill").attr('data-percentage'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bar1" class="barfiller">
    <span class="tip"></span>
    <span class="fill" data-percentage="50"></span>
</div>

score 0 · Answer 2 · answered Dec 06 '18 at 14:52

0

$("#bar1 .fill").attr("data-percentage", projectstatus);

answered Dec 06 '18 at 14:52

Hakeem.D

126
3
12

1

Generally better to use `.data` for `data-` attributes. – freedomn-m Dec 06 '18 at 14:55
In fact, in this case, you probably *have* to use `.data` as it's likely the "barfiller" will be using `.data` to read the value and that will use jquery's internal value before it uses the attribute - so changing the attribute will have *no effect* on the desired plugin. – freedomn-m Dec 06 '18 at 14:57

MrMaavin · Answer 3 · 2018-12-07T07:29:56.827

0

I changed your code to make it work.

You have to use $(...).data( key, value) to set a new value to a data-... field in JQuery.

In JS you woulr use .setAttribute("data-percentage", "50"); for example.

$(document).ready( function () {
  console.log($(".fill").data('percentage'));
  onQuerySucceeded(40);
  console.log($(".fill").data('percentage'));
});

function onQuerySucceeded(data) {
    var projectstatus = data;
    $('#bar1 [data-percentage]').data('percentage', projectstatus);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bar1" class="barfiller">
    <span class="tip"></span>
    <span class="fill" data-percentage="50"></span>
</div>

edited Dec 07 '18 at 07:29

answered Dec 06 '18 at 14:52

MrMaavin

1,611
2
19
30

1

Instead of adding an ID to the HTML you could also only change the selector to `$('[data-percentage]')` or maybe even better `$('#bar1 [data-percentage]')` – caramba Dec 06 '18 at 16:10
You are right it always depends. If the code is generated you have to check the possibilities. I changed my solution to your second suggestion. – MrMaavin Dec 07 '18 at 07:27

How to add jquery variable into span class attribute?

3 Answers3