Ajax buttons

The markup ajax adds to a page, which no template holds until something is pressed: the five progress indicators, the throbber a select or a check box carries, the wrapper buttons add rows to and remove them from, the modal and off canvas dialogs, the messages a command hands to the page, and the error state an element is rebuilt in.

Progress indicators

The five indicators an ajax request can be given. Each button replaces the same wrapper, and the callback pauses for a moment so the indicator is on screen long enough to look at. The throbber and the progress bar are also held on the page below, to be themed without racing a request.

Nothing has replaced this yet.

The same indicators, held on the page

Each of these is the markup ajax.js inserts, next to a button in the state ajax.js disables it into. The fullscreen indicator is appended to the body and "None" inserts nothing, so those two are only to be seen by pressing the button above.

Widgets that trigger a request

Ajax is not only for buttons. A select, a checkbox and a textfield can each carry it, and the throbber is then appended to the widget rather than to a button. The textfield fires when it loses the focus.

Select list, which fires as soon as the selection changes.
Check box, which fires on every change of state.
Textfield, which fires once the field loses the focus.

Nothing has replaced this yet.

Buttons that add and remove

The pattern a multiple value widget is built on: a wrapper the buttons replace with a rebuilt version of itself, faded in. The remove button of a row is inside the wrapper it replaces, so it has to be rebuilt along with it.

Buttons that open a dialog

A dialog is markup jQuery UI builds around what the command returns, so the only way to theme it is to open one. The off canvas dialog is the tray the back office slides in from the side.

Messages and errors

The first three buttons hand a message straight to the messages region, without touching the form. The last one leaves the field empty on purpose, so the element comes back in its error state.

Leave it empty and press the button beside it.