• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 571
  • Last Modified:

How to build in jquery auto data refresher with animation?

OK, what I need is - I've got a text:

          280 049 members

Where I want to: every 5 seconds, jquery make a ajax call to link which would return actual number of rows. Then, I want to animate those 1 - 2 last digits ('refresh', blink or sth)

Any ideas?
1 Solution
Basically you need to use setInterval to make an ajax call over and over, and when that AJAX call completes it will update the numbers and draw attention to them if they've changed.  Something like this should do the trick.

/path/to/file.php is just your server-side script that returns the number, and it should return only the number.

Add <span id="update"></span> around the numbers you want updated.

Grab the jQuery UI library (customize it if you don't need the whole thing) from here: http://jqueryui.com/download so that we can use the effects from it to draw attention to the updated numbers.

<script type="text/javascript">
$(function() {
  setInterval(function() {
    $.get('/path/to/file.php', function(response) {
      var orig = $('span#update').html();
      if (orig != response) {
        $('span#update').effect('pulsate', {}, 500);
  }, 5000);

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Train for your Pen Testing Engineer Certification

Enroll today in this bundle of courses to gain experience in the logistics of pen testing, Linux fundamentals, vulnerability assessments, detecting live systems, and more! This series, valued at $3,000, is free for Premium members, Team Accounts, and Qualified Experts.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now