Using jQuery variable as HTML attribute [duplicate]

Question

You're probably going to tell me to just do this all in jQuery, but I'm asking anyway.

I have an animation library that uses a counter to count from 0 to X. This was part of an HTML template I don't really want to modify.

I have built an AJAX script to GET the data I need to count to from a RESTful API source. Yes, I know, the api-key (secret) is still there, but there's no sensitive data and I'll cycle it after we're done here.

This HTML properly displays the value, but I can't for the life of me figure out how to get the value of the jQuery var $numClients into the "data-to" attribute.

Can anyone help me figure this out? I was hoping I could just reference the variable like "data-to=$varFromQuery" but I am a backend guy, not a JS guy, so I'm totally lost on this.

$(document).ready(function() {
    $.ajax({
        url: "https://path.to.url"
    }).then(function(data) {
       $('.totalTransferredGB').append(data.totalTransferredGB);
       $('.numClients').append(data.numClients);
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div class="counter-item">
     			    <span class="counter-number numClients" data-from="1" data-to="WHAT DO I PUT HERE" data-speed="20"></span>
     			     <span class="counter-text">Unique Devices Connected</span>
     		    </div>

EDIT: I ended up solving it with the following code:

...then(function(data) {
       document.getElementById('totalGB').innerHTML=data.totalGB;
       document.getElementById('totalGB').setAttribute('data-to',data.totalGB);
       document.getElementById('numUsers').innerHTML=data.numUsers;
       document.getElementById('numUsers').setAttribute('data-to',data.numUsers);
       document.getElementById('numClients').innerHTML=data.numClients;
       document.getElementById('numClients').setAttribute('data-to',data.numClients);
    });

Update the element using jQuery .prop() or (better) jQuery .data() (if that's how the data attributes are being used). — Pointy
– Pointy, Commented Jul 25, 2018 at 15:17

Rory McCrossan · Accepted Answer · 2018-07-25 15:17:09Z

You can use the data() method to update a data attribute on an element:

$(document).ready(function() {
  $.ajax({
    url: "https://store.zapier.com/api/records?secret=5226d37cd13b40edbb97036f523d0a4e"
  }).then(function(data) {
    $('.totalTransferredGB').append(data.totalTransferredGB);
    $('.numClients').data('to', data.numClients);
    
    // for testing:
    console.log($('.numClients').data('to'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div class="counter-item">
  <span class="counter-number numClients" data-from="1" data-to="WHAT DO I PUT HERE" data-speed="20"></span>
  <span class="counter-text">Unique Devices Connected</span>
</div>

One caveat with this is that it does not update the DOM. The data is stored in an in-memory object which jQuery creates for better performance. If you require the data-to attribute within the DOM itself to be updated then you would need to use attr() instead:

$('.numClients').attr('data-to', data.numClients); // set the value
var numClients = $('.numClients').attr('data-to'); // get the value

Collectives™ on Stack Overflow

Using jQuery variable as HTML attribute [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related