JQuery Dialog - Set Button Text without using Key

Question

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.

gnarf · Accepted Answer · 2011-03-10 20:56:49Z

6

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
      }
    ]
});

answered Mar 10, 2011 at 20:56

gnarf

107k26 gold badges129 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josiah Ruddell · Accepted Answer · 2011-03-10 19:29:50Z

1

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.

answered Mar 10, 2011 at 19:29

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

2 Comments

cweston Over a year ago

Thanks for the source example

gnarf Over a year ago

This source is different in 1.8.5 and beyond: github.com/jquery/jquery-ui/blob/1.8.5/ui/… -- it can now take an array [ {click: handler, text: text} ] or the {text: handler} format for the buttons option (see my answer)

lsuarez · Accepted Answer · 2011-03-10 20:41:51Z

0

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.

answered Mar 10, 2011 at 20:41

lsuarez

4,9921 gold badge31 silver badges51 bronze badges

1 Comment

cweston Over a year ago

Thanks for the suggestion and example, but setting this post initilization seems a bit rigid and prone to bugs (ie. suddenly a key is updated without the matching post setter selector being updated). The reason I am not a huge fan of my current solution is the rare chance of a duplicate returned from the localization routine.

Collectives™ on Stack Overflow

JQuery Dialog - Set Button Text without using Key

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related