How to localise buttons on JQueryUI modal dialog

Question

I have a JQueryUI modal dialog and everything is working fine except for one issue ... how do I localize the OK and Cancel buttons? I have gone through the demos and documentation and unless I am missing something very obvious, can't figure out how to do this ...

My code:

$("#MyDialog").dialog({
.
.
.
    buttons: {
        OK: function () {
.
.
.

        },
        Cancel: function () {
.
.
.
        }
    }
});

This displays a dialog with two buttons, "OK" and "Cancel". How do I get the buttons to read, for example, "Si" and "Cancellare" ..?

What I need to do, is to be able to INJECT a localized value. So what I need is not to hard-code "Si" or "Cancellare" into the dialog setup code but to be able to set the OK button to display either "OK" or "Si" or any other value depending on the locale of the client's machine.

Everything else about the dialog works fine.

Answer 1

The best way to localize buttons is to use the array format for the buttons option.

$( "#MyDialog" ).dialog({
    buttons: [
        {
            text: "OK",
            click: function() { ... }
        },
        {
            text: "Cancel",
            click: function() { ... }
        }
    ]
});

This makes it natural to work with dynamic labels. With this format, you can also specify any other attributes, such as class, disabled, etc.

http://api.jqueryui.com/dialog/#option-buttons

Answer 2

You just change the name of the property...

var buttons = {};
buttons[getLocalizedCaptionForYesButton()] = function() { };
buttons[getLocalizedCaptionForCancelButton()] = function() { };

$("#MyDialog").dialog({
    buttons: buttons
});