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 ... (there is no element with a data-percentage id, but that's what you try to get with your jQuery selector) — caramba
– caramba, Commented Dec 6, 2018 at 14:46
In your case, you need to use this for change data-percentage : $("spam.fill").data("percentage", projectstatus); — Shidersz
– Shidersz, Commented Dec 6, 2018 at 14:55

Hamzeen Hameem · Accepted Answer · 2018-12-06 16:06:48Z

1

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>

edited Dec 6, 2018 at 16:06

answered Dec 6, 2018 at 15:07

Hamzeen Hameem

2,5902 gold badges29 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hakeem.D · Accepted Answer · 2018-12-06 14:52:29Z

0

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

answered Dec 6, 2018 at 14:52

Hakeem.D

1263 silver badges13 bronze badges

2 Comments

fdomn-m Over a year ago

Generally better to use .data for data- attributes.

fdomn-m Over a year ago

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.

MrMaavin · Accepted Answer · 2018-12-07 07:29:56Z

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 7, 2018 at 7:29

answered Dec 6, 2018 at 14:52

MrMaavin

1,7572 gold badges22 silver badges33 bronze badges

2 Comments

caramba Over a year ago

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]')

MrMaavin Over a year ago

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.

Collectives™ on Stack Overflow

How to add jquery variable into span class attribute?

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related