JQuery UI Dialogs: application-wide options

Question

I have swarm of jquery-ui dialogs across my app. Every single time I need a new one, I write the following lines:

$('.another-dialog').dialog({
  title: 'Another dialog',
  autoOpen: false,
  draggable: true,
  modal: true,
  show: 'fade',
  hide: 'fade',
  width: 400,
  position: ['center', 'center'],
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ],
  open: function(event, ui) { $(".ui-dialog-titlebar-close span").html('×') }
});

The only things that are really differ between one dialog from another are the buttons and title keys. What I would like to have here is an application-wide setup for JQuery dialog, so the I would only call

$('.another-dialog').dialog({
  title: 'Another dialog',
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ]
});

with all the needed hash keys implicitly set up (i'd call it — "the default" setup).

I know I can wrap .dialog() call in, say, .myDialog() call where I'd set everything by myself. But I wonder if there's a true, convenient way of doing that.

Thanks in advance!

See this: http://stackoverflow.com/questions/2287045/override-jqueryui-dialog-default-options — Mrchief, Aug 12 '11 at 15:01

Frédéric Hamidi · Accepted Answer · 2011-08-13T19:44:31.943

5

You can put the common options in a variable (or in the data associated with the document if you want to use them from different scopes):

$(document).data("common-dialog-options", {
    autoOpen: false,
    draggable: true,
    modal: true,
    show: "fade",
    hide: "fade",
    width: 400,
    position: ["center", "center"],
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close span").html("×");
    }
});

You can then use $.extend() to add the specific options for each dialog:

$(".another-dialog").dialog(
    $.extend({}, $(document).data("common-dialog-options"), {
        title: "Another dialog",
        buttons: [
            { text: "OK" },
            { text: "Cancel" }
        ]
    })
);

edited Aug 13 '11 at 19:44

answered Aug 12 '11 at 15:02

Frédéric Hamidi

258,201
41
486
479

Nice one. But why store it in the document's data. Why not just a global (or local to the main scope) variable? – Joseph Silber Aug 12 '11 at 15:10
@Joseph, I personally prefer `data()` to global variables (mostly for namespace pollution reasons), and I cannot guarantee the questioner only has one "main" scope, so... :) – Frédéric Hamidi Aug 12 '11 at 15:13

score 0 · Answer 2 · answered Aug 12 '11 at 15:09

var defaultDialog = {
  title: 'Another dialog',
  autoOpen: false,
  draggable: true,
  modal: true,
  show: 'fade',
  hide: 'fade',
  width: 400,
  position: ['center', 'center'],
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ],
  open: function(event, ui) { $(".ui-dialog-titlebar-close span").html('×') }
};

var tunnedDialog= jQuery.extend(true, {}, defaultDialog );

tunnedDialog.title: 'Another dialog';
tunnedDialog.buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ]

$('.another-dialog').dialog(tunnedDialog);

JQuery UI Dialogs: application-wide options

2 Answers2