Dynamic button names on jQuery dialogs

Question

I have a webpage that uses different languages stored in localStorage, and on the jQuery dialog I want the names of the buttons to be dynamically changed according to the language, for example :

var btn_hello_text = getLanguageBtnHelloText();

$('#dialog').dialog({
    autoOpen: false,
    buttons: {
        btn_hello_text: function() { 
            doThings();
        }
    }
});

The problem here is that the dialog shows a button with the text "btn_hello_text" and not the value included in the variable itself. I can't figure a way to change the value of the button text dynamically, any hints? Thank you.

Answer 1

You cannot do that using inline object declaration. But it can be done by using the square bracket syntax instead:

var btn_hello_text = getLanguageBtnHelloText();

var buttonDefs = {};
buttonDefs[btn_hello_text] = function() { doThings(); };

$('#dialog').dialog({
    autoOpen: false,
    buttons: buttonDefs
});

Answer 2

You can use bracket notation (instead of dot notation), like this:

var my_buttons = {};
my_buttons[getLanguageBtnHelloText()] = doThings;

$('#dialog').dialog({
    autoOpen: false,
    buttons: my_buttons 
});