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.

Drinkwater

Answer 1

You just change the name of the property...

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

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

Freeload

Thanks Ken but not the answer I was looking for! Reading my question again I wasn't clear as to what I meant. What I need to do, is to be able to INJECT a localized value. So what I need is not to TYPE "Si" or "Cancellare" as above 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. – Drinkwater

@Drinkwater It's the same concept. I've updated my answer to reflect your requirements. – Freeload

Answer 2

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

Minh

Answer 3

OK, found the way to do this: you need to create one object with you translations in it (this object can be passed into the function) and then create a second object that ties your action functions to the elements of the translations objects:

var translations = {};
translations["ok"] = "Si";
translations["cancel"] = "Cancellare";

var buttonsOpts = {};
buttonsOpts[translations["ok"]] = function () {
            .
            .
            .
        };
buttonsOpts[translations["cancel"]] = function () {
            .
            .
            .
        };

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

Basic answer provided by Alexey Ogarkov to question jQuery UI Dialog Buttons from variables

Drinkwater