Skip to content

October 10, 2009

Ajax/Prototype/Prototype-UI: How to setup Ajax.PeriodicalUpdater with UI.Window

by Joe Kuan

Prototype-UIThis tutorial shows you how to create a Prototype-UI window with Ajax.PeriodicalUpdater. Suppose you need to create an Ajax window and the content is constantly updating. My preferable approach is to wrap both the UI.Window and Ajax.PeriodicalUpdater into one object. To combine PeriodicalUpdater with UI.Window together, the PeriodicalUpdater must be stopped when the window is closed. In order to do that, the UI.Window close event handler must be overridden and the PeriodicalUpdater object is visible to the handler.

Here is the sourcecode of the Javascript functions for the AjaxWinUpdater class.

function AjaxWinUpdater(win_parm, updater_parm) {
  this.win_parm = win_parm;
  this.updater_parm = updater_parm;
  this.win = new UI.Window({
             width: this.win_parm.width,
             height: this.win_parm.height,
             id: this.win_parm.id,
             close: function(win) {
               if (win.updater)
                 win.updater.stop();
               win.destroy();
             }
            })
    .setHeader(this.win_parm.title)
    .center()
    .show();
}

The constructor function takes two object parameters: one for UI.Window and one for PeriodicalUpdater. When the constructor is called, a window is created.

AjaxWinUpdater.prototype.start = function() {

  // Embed the PeriodicalUpdater inside the Window object for
  // close event handler
  if (!this.win.updater) {
    this.win.updater = new Ajax.PeriodicalUpdater(
                  this.win.content,
                  this.updater_parm.url,
                  { method: 'get',
                    parameters: this.updater_parm.parameters,
                    frequency: this.updater_parm.frequency } );
  } else {
    this.win.updater.start();
  }
}

This start method basically creates the Ajax.PeriodicalUpdater object and embeds inside the this.win object only when the PeriodicalUpdater hasn’t been created yet. If this.win.updater already exists, then simple calls the PeriodicalUpdater.start to restart the updater.

AjaxWinUpdater.prototype.stop =
          function( ) {
             if (this.win.updater)
                this.win.updater.stop();
          }

The AjaxWinUpdater.stop method simply calls the PeriodicalUpdater.stop method.

var win = null;

function start_win() {
  if (!win) {
    win = new AjaxWinUpdater(
                      { width: 300,
                        height: 150,
                        id: 'updater',
                        title: 'Auto Update' },
                      { url: './test1.php',
                        frequency: 1 } );
  }
  win.start();
}

function stop_win() {
  if (win)
    win.stop();
}

Finally, the HTML page calls the start_win or stop_win to control the automatic update window.

On the PHP side, test1.php is just a simple script to print the random number to prove the Ajax.PeriodicalUpdater is working.

<h1><?php echo rand(); ?></h1>

On the HTML side

<a href='#' onclick='start_win()'>Click me to start</a><BR>
<a href='#' onclick='stop_win()'>Click me to stop</a>

Here is the screenshot of the random number being updated

UI.Window with Ajax.PeriodicalUpdater

However, this is not the only approach to bind both UI.Window and Ajax.PeriodicalUpdater together. You may want to subclass the UI.Window and embed the PeriodicalUpdater object instead.

I work for iTrinegy. Here are my other Prototype-UI and Prototype blogs

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: