JavaScript

{dialog.object}showWaitMessage Method

Syntax

{dialog.Object}.showWaitMessage(UXWaitMessageTarget [,optionsObject])

Arguments

UXWaitMessageTarget

The type of wait message to show. This can be set to:

Wait Message Target
Description
page

the entire screen is locked and the message is centered on the screen

container:containerId

the contents of a container specified by containerId

panel:panelId

the contents of a Panel specified by panelId

element:elementId

the contents of an element (typically a div) specified by elementId

max

The maximum value

optionsObject

An optional parameter that allows you to control the appearance of the wait window. See example below.

Description

Displays a wait message.

Discussion

Displays a 'wait...' message over the specified target. The specified target is also 'locked' so that the user cannot interact with controls (for example click a button) that are in specified target. This method is often used at the start of an Ajax callback. When the callback is complete, the .hideWaitMessage() method is called.

You can have multiple wait messages displayed at the same time, each locking a different section of the screen.

Two types of wait windows can be created. You can use an animated gif, or you can use CSS3 transformations in place of an animated gif.

Example

//display a wait message over 'CONAINER_1' and also lock the contents of 'CONTAINER_1'
{dialog.object}.showWaitMessage('container:CONTAINER_1');

//add some custom text to the wait message
var wo = {};
wo.message = 'Saving...';
{dialog.object}.showWaitMessage('container:CONTAINER_1',wo);

//use a custom gif for the wait message
var wo = {};
wo.icon = 'images/mywaitgif.gif';
{dialog.object}.showWaitMessage('container:CONTAINER_1',wo);

//use css3 animations
var wo = {};
wo.useCSSAnimation = true;
wo.cssAnimationSettings = {};
wo.cssAnimationSettings.size = 16; //set the size of the animation object to 16x16 pixels
{dialog.object}.showWaitMessage('container:CONTAINER_1',wo);

See Also