Waiter (an Ajax indicator)

The Waiter class automates the little spinning Ajax indicator functionality that users expect when something on the page is being processed. It greys out the area being updated and makes it un-clickable until the update completes (or it fails).

Here's an example of Waiter doing it's thing:

The html I'm using:

<div id="waiterExample" style="width: 400px; height: 100px;border: 1px solid black; background: #ccc;">
I'm a div with some stuff in it...
</div>

var waiterExample = new Waiter($('waiterExample'));
waiterExample.start();
waiterExample.stop.delay(2000, waiterExample); //hide after 2 sec

Waiter has a few options, most to do with the display of the layer. You can pass in styles for the spinner image, styles for the opacity layer, and options for the opacity effect (see Fx.Styles).

Here are are the default styles:

• baseHref - (string) url prefix for the img src (see below); defaults to 'http://www.cnet.com/html/rb/assets/global/waiter/'
• img - (object) options for the image (see below)
• imgPosition - (object) options passed to Element.setPosition for the image; relativeTo is set to the target argument automatically.
• layer - (object) options for the overlay layer (see below)
• fxOptions - (object) options passed to the effects used to transition the overlay and the image opacity

options: {
	baseHref: 'http://www.cnet.com/html/rb/assets/global/waiter/',
	img: {
		src: 'waiter.gif',
		id: 'waitingImg',
		styles: {
			position: 'absolute',
			width: 24,
			height: 24,
			display: 'none',
			opacity: 0,
			zIndex: 999
		}
	},
	imgPosition: {},
	layer:{
		id: 'waitingDiv',
		background: '#fff',
		opacity: 0.9
	},
	fxOptions: {}
}

You can get the default spinner image by downloading our assets for your own server. See: External Assets

If you're using the Ajax class to update content on a page and you have Waiter.js included in your environment, you can just set a new option to use a Waiter automatically on the content area being updated:

new Ajax('/Ajax.Request.Example.html', {
  update: $('ajaxWaiterExample'),
  /* useWaiter will automatically mask out $('ajaxWaiterExample') */
  useWaiter: true,
  /* waiterOptions is the options object for the Waiter class */
  waiterOptions: {
    fxOptions: {duration: 100}
  }
}).request();