6 min read

Controlling a dialog programmatically

The dialog requires few methods in order to function. The full list of the methods we can call on a dialog is as follows:


Used to


Close or hide the dialog.


Permanently disable the dialog. The destroy method for a dialog works in a slightly different way than it does for the other widgets we’ve seen so far. Instead of just returning the underlying HTML to its original state, the dialog’s destroy method also hides it.


Temporarily disable the dialog.


Enable the dialog if it has been disabled.


Determine whether a dialog is open or not.


Move the specified dialog to the top of the stack.


Open the dialog.


Get or set any configurable option after the dialog has been initialized.

Toggling the dialog

We first take a look at opening the widget, which can be achieved with the simple use of the open method. Let’s revisit dialog3.html in which the autoOpen option was set to false, so the dialog did not open when the page was loaded. Add the following to the page:

Then add the following click-handler directly after the dialog’s widget method:

$("#toggle").click(function() {
($("#myDialog").dialog("isOpen") == false) ?
 $("#myDialog").dialog("open") : $("#myDialog").dialog("close") ;

Save this file as dialog14.html. To the page we’ve added a simple that can be used to either open or close the dialog depending on its current state. In the element, we’ve added a click handler for the that uses the JavaScript ternary conditional to check the return value of the isOpen method. If it returns false, the dialog is not open so we call its open method else we call the close method instead.

The open and close methods both trigger any applicable events, for example, the close method fires first the beforeclose and then the close events. Calling the close method is analogous to clicking the close button on the dialog.

Getting data from the dialog

Because the widget is a part of the underlying page, passing data to and from it is simple. The dialog can be treated as any other standard element on the page. Let’s look at a basic example.

We looked at an example earlier in the article which added some elements to the dialog. The callback functions in that example didn’t do anything, but this example gives us the opportunity to use them. Add the following code above the tags in dialog14.html.

Please answer the opinion poll:

Is jQuery UI the greatest JavaScript widget library?


Now change the final element to as follows:

Save this as dialog15.html. Our dialog widget now contains a set of radio buttons, elements, and some text. The purpose of the example is to get the result of which radio is selected, and then do something with it when the dialog closes.

We start the by filling out the execute function that will be attached as the value of the Ok property in the buttons object later in the script. It will therefore be executed each time the Ok button is clicked.

In this function we use jQuery’s each() method to look at both of the radio buttons and determine which one is selected. We set the value of the answer variable to the radio button’s value and then created a short message along with appending it to the of the page. The callback mapped to the Cancel button is simple, all we do is close the dialog using the close method.

The following screenshot shows how the page should appear once a radio button has been selected and the Ok button has been clicked:

The point of this trivial example was to see that getting data from the dialog is as simple as getting data from any other component on the page.

Dialog interoperability

We can easily place other UI widgets into the dialog, such as the accordion widget. In a new file in your text editor create the following page:

jQuery UI Dialog Example 17

Header 1

Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit.Aenean sollicitudin.

Header 2

Etiam tincidunt est vitae est.
 Ut posuere, mauris at sodales rutrum, turpis.

Header 3

Donec at dolor ac metus pharetra aliquam.
Suspendisse purus.

Save this file as dialog16.html. The underlying markup for the accordion widget is placed into the dialog’s container element, and we just call each component’s widget method in the . The combined widget should appear like this:

Subscribe to the weekly Packt Hub newsletter

* indicates required


Please enter your comment!
Please enter your name here