I need to provide localization for the button text of a JQuery dialog, however JQuery dialog's usually make use of the key for the button text:

$(DialogDiv).dialog({
    bgiframe: true,
    resizable: false,
    buttons: { Save : saveCallback, Cancel : cancelCallback}
});

Is there a way to separately specify the text without using the key as the text value? Currently I am using this, however I am not a fan of using the localized values as the keys:

var buttonCallbacks = {};       
buttonCallbacks[.i18n.getText("Save")] = function() {};
buttonCallbacks[.i18n.getText("Cancel")] = function() {};

$(DialogDiv).dialog({
    bgiframe: true,
    resizable: false,
    buttons: buttonCallbacks 
});

Thanks.

I need to provide localization for the button text of a JQuery dialog, however JQuery dialog's usually make use of the key for the button text:

$(DialogDiv).dialog({
    bgiframe: true,
    resizable: false,
    buttons: { Save : saveCallback, Cancel : cancelCallback}
});

Is there a way to separately specify the text without using the key as the text value? Currently I am using this, however I am not a fan of using the localized values as the keys:

var buttonCallbacks = {};       
buttonCallbacks[.i18n.getText("Save")] = function() {};
buttonCallbacks[.i18n.getText("Cancel")] = function() {};

$(DialogDiv).dialog({
    bgiframe: true,
    resizable: false,
    buttons: buttonCallbacks 
});

Thanks.

• javascript
• jquery
• jquery-ui
• jquery-ui-dialog

3 Answers 3

If you take a look at the button options for Dialog, you'll notice the second format listed accepts an array of objects:

$(DialogDiv).dialog({
    bgiframe: true,
    resizable: false,
    buttons: [ { 
        text: .i18n.getText("Save"),
        click: saveCallback
      }, {
        text: .i18n.getText("Cancel"),
        click: cancelCallback
      }
    ]
});

Just peaked at the source (1.8):

var button = $('<button type="button"></button>')
    .text(name) // name is object key from each
    .click(function() { fn.apply(self.element[0], arguments); })
    .appendTo(uiDialogButtonPane);

So it doesn't look like it.

Now you could I suppose add a after show callback that modifies the buttons. This seems very hackish - I'd suggest the way you are currently doing it.

I can tell you how to make changes ex-post-facto once your initialization is plete, but doing it in the constructor would require a fundamental alteration of the jQuery UI library, which is quite doable of course since it's open source. The functionality is not provided to you currently.

Instead, I'd suggest the following which will execute the changes you desire after dialog initialization:

$('.myDialogSelector').parent()
    .find('span.ui-button-text:contains("OriginalNameFromKey")')
    .html("New Button Text");

See a working fiddle here.

May I inquire why the format of the constructor is of any importance to you whatsoever? I'm having a hard time imagining the specifics of the usecase. The way you're building your buttons mapping seems just fine.