What is the proper way of changing button-captions from a variable with jquery UI Dialog?

Question

In a jquery UI Dialog, I want the value of som variables put into the buttons.

If I for instance have:

var okButtonText= 'Ok';
var cancelButtonText= 'Cancel';

and I want the buttons to set to value Ok and to Cancel respectivly:

$(dialogObj).dialog({
      modal: true,
      buttons: {
        "okButtonText": function() {             
          $( this ).dialog( "close");
        },
        "cancelButtonText": function() {
          $( this ).dialog( "close" );
        }
       }
});

When I do like above the buttons are named okButtonText and cancelButtonText (I want them to be named OK and Cancel)

If I try without quotes:

$(dialogObj).dialog({
      modal: true,
      buttons: {
        okButtonText: function() {             
          $( this ).dialog( "close");
        },
        cancelButtonText: function() {
          $( this ).dialog( "close" );
        }
       }
});

it's the same effect.

I guess I COULD change the buttons with open-option in the jquery UI Dialog (with changing the html of each button), but that seems totally wrong and I just have a feeling that there is a much better solution out there :-)

Answer 1

Try using text option of your buttons:

Specifies which buttons should be displayed on the dialog. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object. Multiple types supported: Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked. Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.

Code:

$(".selector").dialog({
    modal: true,
    buttons: [{
        text: okButtonText,
        click: function () {
            $(this).dialog("close");
        }
    }, {
        text: cancelButtonText,
        click: function () {
            $(this).dialog("close");
        }
    }]
});

Answer 2

Try to use text option here:

$(".selector").dialog({
    modal: true,
    buttons: [{
        text: "Ok",
        click: function () {
            $(this).dialog("close");
        }
    }, {
        text: "Cancel",
        click: function () {
            $(this).dialog("close");
        }
    }]
});