Prototype - AJAX PeriodicalUpdater() Method



This AJAX method periodically performs an AJAX request and updates a container's contents based on the response text.

Containers are specified by giving IDs of the HTML elements like division or paragraphs. See example below.

Callbacks are called at various points in the life-cycle of a request, and always feature the same list of arguments. They are passed to requesters right along with their other options.

Syntax

new Ajax.PeriodicalUpdater(container, url[, options]);

Ajax.PeriodicalUpdater features all the Common Options and callbacks, plus those added by Ajax.Updater()..

There are two more options specific to this method −

Option Description
frequency

Default value is 2.

This is the minimum interval at which AJAX requests are made.

decay

Default value is 1.

This controls the rate at which the request interval grows when the response is unchanged.

Return Value

Returns AJAX PeriodicalUpdater object.

Disabling and Enabling a PeriodicalUpdater

You can pull the brake on a running PeriodicalUpdater by simply calling its stop method. If you wish to re-enable it later, just call its start method. Both take no argument.

Example

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function startTimer() {
            new Ajax.PeriodicalUpdater('datetime', '/cgi-bin/timer.cgi', {
               method: 'get', frequency: 3, decay: 2
            });
         }
      </script>
   </head>

   <body>
      <p>Click start button to see how Current Time changes.</p>
      <p>This example may not work in IE.</p>
      <br />
 
      <div id = "datetime">Current Time</div>
      <br />
      <br />
      <input type = "button" value = "Start" onclick = "startTimer();"/>
   </body>
</html>

Here is the content of timer.cgi script −

#!/usr/bin/perl

print "Content-type: text/html\n\n";

$datetime = localtime;
print $datetime;
print "<br />";

Output

prototype_ajax_tutorial.htm
Advertisements