Periodic Updater (jQuery Plugin)

Sometimes we have to use permanent ajax requests to update DOM objects. In this case, some javascript libraries may have the feature but jQuery doesn’t have. You can use this plugin to make continous requests in your projects. Three arguments will return in your callback method. Please read “How to use” below.

Version and development

Dependencies

: jQuery 1.3 or higher

Latest Version

: 0.3b

Browser Support

The plugin is tested with the browsers below:

• Mac OS X
  • Firefox 3.x, 4.x … 10.x
  • Chrome 7.x
  • Opera 10.63
  • Safari 5.x
• Windows
  • No tests have been made as I don’t have any Windows installation.

Download

Github

: jQuery Periodic Updater on Github

All versions

: Check current or old versions

Demo

The plugin has started with “document.ready() function” when the page was loaded. You can stop or restart the plugin with the buttons below.

This demo is working with the following settings

{
   url: '/demos/json.php',
   interval: 10000,
   method: 'get',
   data:{'userId': 1},
   response: 'json',
}

How to Use

1. Include the js files

First, include JQuery and periodic updater plugin in your code

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript" src="updater.js"></script>

2. Available and default options

These are default options. You can change the url option in your code. You can alter other options as required.

{
   url: undefined,      // request url
   data: undefined,     // your data send will request
   interval: 3000,      // interval per request
   method: 'post',      // method, you can use get or post
   response: 'json'     // response data type
}

3. Initialize the plugin

You have to call the main method under document ready to initialize the jQuery Periodic Updater plugin.

$(function(){                           // Start document ready
   $.updater({                          // Call the plugin
      url: 'request.php',               // Request URL
      interval: 15000                   // interval time
   },
   function(data, response){            // Callback method..
                                        // your code here..
   });
});

4. Stop or restart methods/events

You can use the following methods to stop or restart the requests.

$(document).trigger('stop.updater');    // Trigger the stop event or
$.updater.stop();                       // call the stop method.

$(document).trigger('start.updater');   // Trigger the start event or
$.updater.start();                      // call the start method.

5. Debug

Also there is a debug method available for the plugin.

$.updater.debug();                      // call the debug method.

If use the debug method on this page you will see the output like that

   Url: /demos/json.php
   Interval: 10000
   Method: get
   Data: Object { userId=1}
   Callback: function()
   Last Request: success
   Requests Continues: true

6. Errors

If you get error from server you will see ‘Last Request’ line of the debug method’s outputs

  Url: /demos/nofile.php
  Interval: 10000
  Method: get
  Data: Object { userId=1}
  Callback: function()
  Last Request: XMLHttpRequest
  Requests Continues: true

The debug method will write the object to your browser console. You have to open the console before debugging. For Firefox, you can install the Firebug extension, Chrome, Opera and Safari have developer tools themselves.

Change Logs

0.3b

• status argument removed of debug method
• performance improvements

0.2b

• Added response data type to default settings.
• Added last request status to error handle and requests continues status to debug method.
• Started using $.ajax instead of $.get and $.post.

0.1b

• Plugin released.