jQuery UI: Dialog Close Button Text

By default, the jQuery UI dialog widget places a close button on the right-hand side of the title bar. In past versions, this has just been a strewn-together mess of elements and events. Now it uses the button widget, which for obvious reasons, makes things a little easier to handle. Like when you only want text displayed, and not the close icon.

jQuery UI: Parameters in Dialog Callbacks

The dialog buttons object allows you to configure action buttons to be displayed in the bottom pane. It's a simple configuration, as it's just an object. The key is the button label and the value is the callback function for click events. We can create as many of these buttons as we like. Typically, we pass the dialog button configuration object to the widget when it's being created. However, we can pass in the button configuration at a later time, after the dialog has been created. Possibly after it's already being displayed for the user. This configuration is handy, but not without it's limitations. Chief among them, configuring the callback functions themselves.

jQuery UI Dialog Buttons

The jQuery UI javascript toolkit provides UI developers with a nice dialog widget. The dialog widget inside web application user interfaces is a great way to achieve optimal use of the space provided. These dialog widgets can be configured with dialog action buttons. These are automatically-generated buttons that are placed at the footer of the dialog when it is displayed. This is the preferred method of displaying buttons in the jQuery UI dialogs as they look more like part of the dialog than something that was placed inside the dialog.

The button configuration for the jQuery UI dialog widget is specified as a javascript object containing all the buttons to be displayed in the dialog. Each attribute of the object maps to the text displayed inside each dialog button. The value of these attributes are the callbacks that are executed when the button is clicked.

However, there are a few problems to this approach. Firstly, the text of these buttons is difficult to update without replacing the entire button set. This is not only computationally expensive, but is also not an ideal way to couple code since the same operation has two responsibilities. Updating the dialog button text of a particular button and replacing all buttons entirely should be two distinct operations. Secondly, this also relates to the first problem, the dialog buttons cannot be uniquely identified easily.

A better configuration format might be to specify a DOM ID for each button in the main button configuration object. So the button would then have a unique handle. Underneath each DOM button ID would be another object specifying the button label and the button callback event.