Override jQueryUI dialog default options

Question

I want to be able to create modal dialogs, with, for example

close: function() {
    $(this).remove();
}

default option, without need to specify those on dialog creation, but somehow override those parameters on one place.

Is this possible?

Answer 1

Dialog and other widgets in jQuery UI define a hash with their default values. You can override these after jQuery UI has been loaded.

Search through the javascript for the line where the defaults are set:

$.extend($.ui.dialog, {
version: "1.7.2",
defaults: {
    ...

As an example, in your javascript, you can turn autoOpen off with:

$.ui.dialog.defaults.autoOpen = false;

Or you can merge a hash of options:

$.extend($.ui.dialog.defaults, {
  autoOpen: false,
  title: 'Default title'
})

Answer 2

I, too, needed to override default options and took me a while to figure out for jQuery UI 1.8:

$.extend($.ui.dialog.prototype.options, {
    modal: true,
    resizable: false,
    draggable: false
});

The above code will allow you to drop anything on top of the dialog options. The above method should work for most UI components (it will also let you prototype over the functions that exist, or add to).

Answer 3

You should create an abstration that calls the jQuery dialog function then.

Basically, instead of creating the options literal everyplace you want to use the jQuery dialog, create a function which creates the options that you want and then call the jQuery dialog function from that.

Then, in all areas of your code, call the function you wrote that encapsulated the code.

This process is known as encapsulation and applies to most (if not all) software development languages. One of the major benefits is that it makes your code easier to maintain.