This page contain some examples for the collapsible concept of a popup. Please have a look at the page in the components section for more details.

A popup opened with the help of a controller. The popup contain a required input field. The attribute `collapsedMode="absent"` is set, so the 'Submit'-button outside the popup could be executed while popup is hidden. Even if the required input field is empty.

Simple Popup

Server side popup with `<tc:operation/>`. The attribute `collapsedMode="absent"` is set by default. If you press the 'Submit'-button in the popup, the popup remains open, because the server know the current state.

Full Server Request Popup

For the client side popup the attribute `collapsedMode="hidden"` must be set. So the hidden popup is already rendered on the site. Otherwise a client side opened popup has no content.

This leads to the problem of violations of hidden content. In this case you cannot press the 'Submit'-button if the required field is empty. Even if the popup is hidden.

The 'Submit'-button in the popup will close the popup, because the server didn't know the current state.

To avoid server request, the attribute `omit="true"` is added to the 'Open'-button and the 'Close'-button.

Client Sided Popup

The opening of the popup is client side. Therefor the popup will be closed after pressing the 'Submit'-button which reload the page.

A JavaScript custom event is fired if a `<tc:popup/>` is collapsed or expanded.

`tobago.popup.show` is fired before the popup is expanded.

`tobago.popup.shown` is fired after the popup is expanded. (Does not wait for a possible Ajax reload.)

`tobago.popup.hide` is fired before the popup is collaped.

`tobago.popup.hidden` is fired after the popup is collapsed. (Does not wait for a possible Ajax reload.)