Question

I am developing a web page which contains many jQuery dialogs.

While my code works in principal, I noticed it soon got “dirty”, and I feel a strong urge to clean up the code and make it more OO-like.

The main issues with my code are:

• no dialog-specific state (i.e. set of variables)
• no dialog-local event handlers
• dialog-specific functions are global

Which approaches and solutions exist to make jQuery dialog more OO-like, as in Delphi and WinForms?

Answer 1

Maybe the following can help you:

• no dialog-specific state (i.e. set of variables)

You can use data() to associate state with the augmented element, as with any element:

$("#yourDialog").dialog({
    // your options...
}).data("yourData", {
    some: "state",
    associatedWith: "thisElement"
});

---

• no dialog-local event handlers

What you mean by dialog-local is not clear, but dialog widgets do emit events, and you can of course bind different handlers to events triggered on the inner elements of different dialog widgets.

---

• dialog-specific functions are global

They’re not actually global (they’re part of the $.fn namespace), but I understand having to call dialog() on the augmented element every time can be seen as unnecessarily heavy.

That syntax, however, is only a bridge, a way to access the widget’s methods more suited to jQuery’s idioms. You can obtain a reference to the widget itself using, again, data(), then invoke its methods directly. For instance:

$("#yourDialog").dialog("open");
$("#yourDialog").dialog("close");

Is equivalent to:

var dialogWidget = $("#yourDialog").data("dialog");
dialogWidget.open();
dialogWidget.close();

Update: From jQuery UI 1.9 onwards, the data() key becomes the widget’s fully qualified name, with dots replaced by dashes. Therefore, the code above becomes:

var dialogWidget = $("#yourDialog").data("ui-dialog");
dialogWidget.open();
dialogWidget.close();

Using the unqualified name is still supported in 1.9 but is deprecated, and support will be dropped in 1.10.