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.

Answer 1

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 :)