Translate "Buttons" in jQuery UI Dialogs

Question

I have two JavaScript files with translations, which will be included depending on the users language. This works fine for most cases. But not for the Buttons object inside an jQuery UI Dialog. Any ideas how to solve this?

if (data.status == 'success') {
    options = {
        buttons: {
            CLOSE: function() {
                      $(this).dialog('close');
                   }
            }
        };

CLOSE must be translated.

Gromwell

Answer 1

Create the buttons object like this:

var myButtons = {};
myButtons[CLOSE] = function() { $(this).dialog('close'); };

if (data.status == 'success') {
  options = {
    buttons: myButtons
  };
}

Edit: Updated to use the CLOSE variable.

Mashie

+1 this is how I do translation throughout jQuery UI. We need to change a little bit of our code, but works like a charm. – Hightower

Answer 2

There are two ways to specify buttons in a dialog (since 1.8.5). Only one of them is useful for internationalization. Define your options like this:

if (data.status == 'success') {
    options = {
        buttons: [{
            text: CLOSE,
            click: function() {
                      $(this).dialog('close');
                   }
        }]
    }
}

@dioslaska's solution works as well, but I think this way is prettier.

Sg

I prefer this answer too since it is more obvious where the translations are coming from. – Millsap

Answer 3

Just put in in quotation marks :P

if (data.status == 'success') {
  options = {
    buttons: {
      'translated text for close': function() {
                  $(this).dialog('close');
               }
       }
  };

Sextodecimo

The translations are stored in an JS file like: var CLOSE = 'Schließen'; so your solution wont work. – Gromwell

Answer 4

You must modify the declaration of the Dialog widget in jquery-ui javascript file.

Find the line

closeText: "Close",

and replace "Close" with your translation.

Feces