CBL Partial Updater

1. Introduction

CBL Partial Updater is an AJAX library for PHP. Unlike other libraries, all operations are controlled at the server side. Using the library, it is very easy to add AJAX features to existing PHP applications.
Just add a few lines to your PHP and HTML, and your web application turns into an AJAX app.

2. Download

Current version of CBL Partial Updater is available at SourceForge. See the project page for details.

3. Prerequisites

PHP4	CBL Partial Updater is currently developed and tested for PHP4
HTML Parser for PHP 4	a HTML Parser for PHP4
prototype.js	a JavaScript library with AJAX functionality

4. Examples

Refer to the examples page.
There might be new information at the author's weblog.

5. How to Use

5.1. Modify your HTML

Load prototype.js and partialupdater.js from your HTML.
Decide which part(s) of the HTML you would like to update partially. Mark them using span or div tag with unique id attributes.
Call CBL_PartialUpdater.update from your onSubmit handler to your form tag (or an onClick handler to your input type=submit tag).

<script language="JavaScript" src="prototype.js"></script>
<script language="JavaScript" src="partialupdater.js"></script>
...
<span id='count'><% = $num %>
...
<form onSubmit="CBL_PartialUpdater.update('index.php', this); return false">
...
</form>

5.2. Modify your PHP Code

5.2.1. If Using Smarty

If you are using smarty, simply replace your call to smarty->display with CBL_PartialUpdater::display. Specify the id(s) of HTML element(s) to be sent. Load partialupdater.class.php, of course.

require_once 'partialupdater.class.php';
...
CBL_PartialUpdater::display($smarty, 'index.tpl', 'count');

5.2.2. If NOT Using Smarty

Call ob_start before start writing HTML content. Call CBL_PartialUpdater::ob_end_flush at the end of your code, specifying the id(s) of the HTML element(s) to be updated.

require_once 'partialupdater.class.php';
...
ob_start();
...
your HTML output code
...
CBL_PartialUpdater::ob_end('count');

5.3. Done

Congratulations! Your PHP code now supports AJAX!

6. Further Information

6.1. Support for Live Search

In your HTML, call CBL_PartialUpdater.liveUpdate instead of calling CBL_PartialUpdater.update as described in section 4.1. The library will automatically detect any changes to your form, and update your html accordingly.

window.setInterval("CBL_PartialUpdater.liveUpdate('index.php', document.theForm);", 500);

6.2. Displaying a Indicator

Various options, such as request methods can be passed to Partial Updater and the underlying prototype.js by using the third parameter of CBL_PartialUpdater.update (or CBL_PartialUpdater.liveUpdate).
For example, it is easy to display a spinner while updating content through AJAX, use spinnerId and spinnerImg options.

<img id="spinner" src="blank.gif" width="18" height="18" />
...
CBL_PartialUpdater.update('index.php', this, { spinnerId:'spinner', spinnerImg:'spinner.gif' });

6.3. Author's Weblog

For more information / discussion, please visit the author's weblog: Kazuto at Work.