How to localize buttons in a jQueryUI modal dialog

Question

I have a JQueryUI modal dialog, and everything works fine, except for one problem ... how can I localize the OK and Cancel buttons? I went through the demo and the documentation, and if I don’t miss something very obvious, I can’t figure out how to do it ...

My code is:

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

A dialog box appears with two buttons: OK and Cancel. How to get buttons for reading, for example, "Si" and "Cancellare" ..?

What I need to do is be able to INJECT a localized value. Therefore, I need not hardcode "Si" or "Cancellare" in the dialog setup code, but be able to set the OK button to display "OK" or "Si" or any other value depending on the client machine locale.

Everything else in the dialog box works fine.

Answer 1

You just change the name of the property ...

 var buttons = {}; buttons[getLocalizedCaptionForYesButton()] = function() { }; buttons[getLocalizedCaptionForCancelButton()] = function() { }; $("#MyDialog").dialog({ buttons: buttons }); 

Answer 2

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

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

This allows you to work with dynamic shortcuts. In this format, you can also specify any other attributes, such as class , disabled , etc.

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

Answer 3

OK, I found a way to do this: you need to create one object with your translations in it (this object can be passed to a function), and then create a second object that associates your actions with translation elements:

 var translations = {}; translations["ok"] = "Si"; translations["cancel"] = "Cancellare"; var buttonsOpts = {}; buttonsOpts[translations["ok"]] = function () { . . . }; buttonsOpts[translations["cancel"]] = function () { . . . }; $("#MyDialog").dialog({ . . . buttons: buttonsOpts }); 

Alexey Ogarkov's main answer to the jQuery UI Dialog Buttons from variables question