Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

Collapsible Popup

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

Simple Popup

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.

Full Server Request

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.

Client Side

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.

Events

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.)

© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.