set data for div with jquery

Question

I have a div that show a counter number, when data for this div be static all of things is good but, I wanna set data with Jquery or with ajax request. I tested this codes but not working

HTML Code

<div id="NewVistors" class="number count-to" data-from="" data-to="" data-speed="" data-fresh-interval="20"></div>

Jquery Code:

<script>
    window.onload=function(){

        var div = $('#NewVistors');
        div.data('data-from',0);
        div.data('data-to',20000);
        div.data('data-speed',1000);
        div.data('data-fresh-interval',20);
        console.log(div.data('data-to'));           
        }

</script>

When I run this codes in my console I can get data-to attribute, that is 20000

Look at this for that solution https://stackoverflow.com/a/11794180/4687602 — Komang Suryadana, Jul 17 '17 at 05:55

Emipro Technologies Pvt. Ltd. · Answer 1 · 2017-07-17T06:02:36.343

0

Please add this code into your function.

$("#NewVistors").html(div.data('data-to'));

edited Jul 17 '17 at 06:02

answered Jul 17 '17 at 05:56

Emipro Technologies Pvt. Ltd.

14,598
5
45
75

score 0 · Accepted Answer · answered Jul 17 '17 at 05:58

Here you go with the solution https://jsfiddle.net/5mwdcugq/

var div = $('#NewVistors');
div.attr('data-from',0);
div.attr('data-to',20000);
div.attr('data-speed',1000);
div.attr('data-fresh-interval',20);
console.log(div.attr('data-to'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="NewVistors" class="number count-to" data-from="" data-to="" data-speed="" data-fresh-interval="20"></div>

Here you go with one more solution https://jsfiddle.net/5mwdcugq/1/

var div = $('#NewVistors');
div.data('from',0);
div.data('to',20000);
div.data('speed',1000);
div.data('fresh-interval',20);
console.log(div.data('to'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="NewVistors" class="number count-to" data-from="" data-to="" data-speed="" data-fresh-interval="20"></div>

score 0 · Answer 3 · answered Jul 17 '17 at 05:59

.data() uses internal cache it only uses uses the data attribute as the default value only. On performing update operation via .data(key, value) then DOM is not updated. Also the usage is also not correct, you don't need to prefix data- when using the method.

div.data('from',0);

I think you need to use use .attr() to get and set attribute value.

var div = $('#NewVistors');
div.attr('data-from',0);

score 0 · Answer 4 · answered Jul 17 '17 at 06:00

You can set data using two different method

1st method

window.onload=function(){
    var div = $('#NewVistors');
    div.data('from',0);
    div.data('to',20000);
    div.data('speed',1000);
    div.data('fresh-interval',20);
    console.log(div.data('to'));           
}

2nd method

window.onload=function(){
    var div = $('#NewVistors');
    div.attr('data-from',0);
    div.attr('data-to',20000);
    div.attr('data-speed',1000);
    div.attr('data-fresh-interval',20);
    console.log(div.attr('data-to'));           
}

set data for div with jquery

4 Answers4