0

So I have a custom html/aspx in my sharepoint page with a counter at the bottom part of my page. If the 'data-to' attribute of my div is hard coded

<div class="timer" id="test1" data-to="1000" data-speed="5000"></div>

and when previewing the page, it works as expected.

but when I have a JS that will retrieve the ItemCount of a list using REST API

and set the 'data-to' based on the ItemCount I got from the REST API, it doesn't work even if I inspect the element and 'data-to' has an updated value based on the retrieved ItemCount

function GetAllCount() { //stats
var list        = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Test')/ItemCount";
var itemCount   = 0;

$.ajax({ 
    url: list,
    method: "GET",
    headers: { 
        "accept":"application/json;odata=verbose"
    },
    success: function(data) { 
        console.log(data);
        itemCount = data.d.ItemCount;
        $('#test1').attr('data-to', 1000);
    },
    error: {

    }
})

}

0

In your example, the jQuery CountTo is only be processed at load time, and before your AJAX completes. Changing the attribute after the timer has run will not restart it.

See the "JavaScript Options" section of https://github.com/mhuggins/jquery-countTo#javascript-options and run code like this in your AJAX success function:

$('.timer').countTo({from: 0, to: 500});
  • that was fast, I came across that link but didn't try that. thank you! – Aventus Mar 20 '18 at 1:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.