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?

Albany

Answer 1

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).

Tell

Looks like I'm having the same problem as @Softion. This is not working in jQueryUI 1.8.16. – Kerb

No finally it works ok. You need to update your browser cache. – Nonrestrictive

works as of 1.11.4. The "defaults" alternative below doesn't work as $.ui.dialogs.defaults === undefined – Mons

Answer 2

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.

Isiahisiahi

Answer 3

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'
})

Tuba

Thanks for the answer. This $.ui.dialog.defaults.autoOpen = false; fails. this $.extend($.ui.dialog.defaults, { autoOpen: false, title: 'Default title' }) didnt worked, same behaviour as befoore adding it :( Thanks again. – Albany

Works for me. One thing, you might need to delay the setting of those defaults until after jquery ui has completed: setTimeout(function() { ... set defaults here ... }, 1); Just to be sure, in this example what autoOpen false does, it will prevent the dialog from being shown until you manually open it. Just an example, try any option you want. – Tuba