How to set custom buttons (text) in jQuery UI Dialog?

Question

I do get that we easily can set the Close button text to a variable, using closeText option

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    closeText: btnCancel, // <-----
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    buttons: {
        Close: function() {
            $(this).dialog('close');
        }
    }
});

but how about a custom name?

this does not work :(

var btnResetMapping = 'Reset Mapping';

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    closeText: btnCancel,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    buttons: {
        Close: function() {
            $(this).dialog('close');
        },
        btnResetMapping: function() {  // <-----
            // logic here
        },
    }
});

This can be seen as weird question, but my variable, in the code is:

var btnResetMapping = '<%= Resources.PARbuttons.btnResetMapping %>';

witch is loaded correctly from the Global Resources file, with the correct sentence for the applied localization.

it works fine using:

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    closeText: btnCancel,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    buttons: {
        Close: function() {
            $(this).dialog('close');
        },
        '<%= Resources.PARbuttons.btnResetMapping %>': function() {  // <-----
            // logic here
        },
    }
});

But I'm refactoring this as place the javascript file in it's own place (alone file), and I want to, not only do this way (separate HTML from Javascript - It's a Business Web Aplication that is always loaded from the INTRANET, never using Internet btw) but to understand it.

Thank you.

Fine. You try putting the string inside btnResetMapping directly into the object? — Stephen
– Stephen, Commented Aug 20, 2010 at 12:31

Nick Craver · Accepted Answer · 2010-08-20 12:02:31Z

4

You can use bracket notation, like this:

var myButtons = { Close: function() { $(this).dialog('close'); }  };
myButtons[btnResetMapping] = function() { ...logic here... };
$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    closeText: btnCancel,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    buttons: myButtons
});

Just make sure btnResetMapping is defined before this code runs and you're all set :)

answered Aug 20, 2010 at 12:02

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

Collectives™ on Stack Overflow

How to set custom buttons (text) in jQuery UI Dialog?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related