PeriodicalUpdater for jQuery

Here at 360innovate we’ve benefitted greatly from free and open source software.

Whether it’s the web server our sites run on or the operating system that runs the web server, free and open source software plays a huge part in the industry we work in.

And so, we present this jQuery plugin in an effort to give a little something back!

The Prototype javascript library features a very useful PeriodicalUpdater() function. This loads content at specified intervals, but if the content being pulled in doesn’t change, the interval gradually increases.

There are several benefits to this approach – it saves bandwidth, and can reduce the CPU usage on the client’s machine.

Unfortunately, there’s been no way to replicate this using jQuery…until now!

Let’s take a look at how it works.

Step 1 – Include the latest version of jQuery and the plugin.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.periodicalupdater.js" type="text/javascript"></script>

Step 2 – call the function with the necessary options and a callback function

$(document).ready(function(){
   $.PeriodicalUpdater({
      url : 'random.php'
   },
   function(data){
      var myHtml = 'The data returned from the server was: ' + data + '';
      $('#results').append(myHtml);
   });
})

Here’s a list of all the options you can set:

url
URL for the ajax request. (Required!)

method
Can be either get or post. (Or GET or POST!)

sendData
Array of values to be passed to the page – e.g. {name: “John”, greeting: “hello”}

minTimeout
Starting value for the timeout in milliseconds.

maxTimeout
Maximum length of time between requests.

multiplier
Sets the amount of decay between ajax requests. If this is set to 2, the length of time between each request will double while the response doesn’t change.

type
Response type – can be text, xml, json etc – as with jquery.get or jquery.post.

Step 3 – Stop the requests!

Finally, you might want to stop ajax requests from PeriodicalUpdater – you can do so like this (assuming you had a link with id stop):

$('a#stop').click(function(e){
   e.preventDefault();
   clearTimeout(PeriodicalTimer);
})

We hope you find this plugin useful. It’s dual licensed under the GPL and MIT licences (just like jQuery), so please read them before you use this plugin.

View the demonstration

Download the plugin

Bookmark and Share

Tags: ,

  • good
  • freezone45
    How can I use multiple instances of this plugin? I mean I want to have a periodical updater of 2 different divs' with two different sources.
    Thank you! That's super!
  • Alas, Mobile Safari does not support JSON.parse, so if you want to use PeriodicalUpdater on an iPhone/iPod Touch, you need a workaround. jQuery 1.4.1 supports jQuery.paseJSON, so I changed line 126 of jquery.periodicalupdater.js to read:

    remoteData = jQuery.parseJSON(remoteData);
  • jaysmith123
    how do you make this work with multiple log files and multiple #result id's? ie #result_1, #result_2 etc and multiple log files: /etc/httpd/logs/access.log, /etc/httpd/logs/error.log
  • lea
    Its ok, i make GET into POST.


    Thanks again for your wonderful plugin!!!!
  • lea
    its ok, i use html() instead of append(), but i am jus wondering maybe this is just me, but this does this work in IE? because it is not working for me.
  • lea
    Hey this is a great plugin, thanks! I was wondering if there is a way to make the data update, as new results are received, instead of append???

    Thanks again!
  • Name
    Any way to turn it off automaticlly based on the data?
  • LuK
    Hi,

    thank you very much for this script, good work! I wanted to ask if it's possible so set the multiplier to something <1, means after the first interval has run out, it will check faster and faster? could this also be limited?

    thanks for your answer!
  • luk
    Sure it can be done =)...I use it like this on a site (radio) which needs to update the currently playing track, the intervals have to become shorter and shorter to achieve this in the way I want...so I modified the source a bit...

    first you need to comment out the following line:

    // settings.multiplier = settings.multiplier < 1 ? 1:settings.multiplier;

    this sets the multiper back to 1 if it's smaller than 1...we don't want that =)

    not sure about that (see the original code to verify), but I think I changed something in here too:

    if (timerInterval > settings.maxTimeout)
    {
    timerInterval = timerInterval * settings.multiplier;
    }

    if(timerInterval < settings.maxTimeout)
    {
    timerInterval = settings.maxTimeout;
    }


    I initialize it like this:

    $.PeriodicalUpdater({
    url: 'assets/load/load_ap.front.php',
    method: 'post',
    minTimeout: 80000,
    maxTimeout: 30000,
    multiplier: '0.75'
    ...and so on...
  • I am trying to have this multiple times on a page, however the second one keeps updating the first one as well. The divs have different ids and everying, yet I cannot figure out what's wrong.
  • jules
    I had the same problem, couldn't solve it with this plugin. Got it going with this one instead;

    http://github.com/tra/periodic
  • bill
    Metering down the requests based on "lack of change from last request" is somewhat arbitrary and of doubtful usefulness. It all depends on your application I suppose, but a better metric would be USER ACTIVITY ON THE CLIENT SIDE - if no user there, then no need to poll quite as often,
  • fede
    thanks great work, but you have to set PeriodicalTimer as a global variable of the plugin to allow stop the Timer with clearTimeout
blog comments powered by Disqus