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.

What I mean by this is that the click callback functions we assign to a given dialog button exist in a void, it would seem. This is fine under most circumstances. Other times, we'd like to know the state of the dialog. Or perhaps the click event needs access to some arbitrary piece of application data — which isn't scoped globally.

What's interesting about these callback functions is that the this context is actually the dialog element, and not the button element as one might expect. Not a big deal, but it's nice when your callback wants to interact directly with the dialog, maybe by adding context to a query or by calling dialog widget methods. For example, if we wanted to pass some arbitrary application data to the dialog, we can do so — by passing it to the dialog options object. It's then trivial to retrieve that data in the button click callbacks.