CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-dialog
cweston
cweston

Reputation: 11637

JQuery Dialog - Set Button Text without using Key

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[com.i18n.getText("Save")] = function() {};
buttonCallbacks[com.i18n.getText("Cancel")] = function() {};

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

Thanks.

Upvotes: 4

Views: 2547

Answers (3)

gnarf
gnarf

Reputation: 106332

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: com.i18n.getText("Save"),
        click: saveCallback
      }, {
        text: com.i18n.getText("Cancel"),
        click: cancelCallback
      }
    ]
});

Upvotes: 6

lsuarez
lsuarez

Reputation: 4992

I can tell you how to make changes ex-post-facto once your initialization is complete, 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.

Upvotes: 0

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

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.

Upvotes: 1

Related Questions