#{extends 'jqueryui/layout.html'/} #{set title:'Dialog'/}

Dialog

Use a dialog (i.e. a dialogue box) to show additional user-interface elements that are not part of the main page. A common use case is to show a ‘selector pop-up’ that provides a richer user-interface for selecting a value than a pick-list. This is especially useful when the dialog contents are lazy-loaded.

Demo

Client

The widget is based on a text input, and a button that will open the dialog.

<input name="location">
<button data-url="@{jqueryui.Dialog.timeZones()}">Select Time Zone</button>

The dialog.js JavaScript attaches a click handler to the button. This click handler uses the jQuery UI dialog plug-in to open a dialog box, and loads the dialog contents from the resource given by the data-url attribute value, via an Ajax request.

#{includeVerbatim '/public/javascripts/dialog.js'/}

Server

The server-side resource that is used to populate the dialog contents is simply a server-side view: the controller renders all of the data as an HTML table.

#{includeVerbatim 'jqueryui/Dialog/timezones.html'/}

A more realistic example might include server-side filtering of a long list, so that the selector can be used to select one of thousands of values.