jQuery modal dialog button text

Question

Based on the code below to show a JQuery dialog, the button text shows up as the literal "b" as opposed to the value of the variable b.

Ie: showWarningDialog('myBody', 'myTitle', 'go') shows a dialog with a button labelled b instead of go.

How can you get go to appear?

function showWarningDialog(theBody, theTitle, buttonText) {
    var t = "Warning";
    if (theTitle != null) {
        t = theTitle;
    }

    var b = "Ok";
    if (buttonText != null) {
        b = buttonText;
    }

    $("#div-dialog-warning div").text(theBody);

    $("#div-dialog-warning").dialog({
        title: t,
        resizable: false,
        height: 160,
        modal: true,
        buttons: {
            b : function () {
                $(this).dialog("close");
            }
        }
    });
}

Answer 1

As per the jQuery UI docs, the button name comes from the button's key in the buttons object. In which case, replace this bit:

$("#div-dialog-warning").dialog({
    title: t,
    resizable: false,
    height: 160,
    modal: true,
    buttons: {
        b : function () {
            $(this).dialog("close");
        }
    }
});

with this:

var buttonOpts = {};
buttonOpts[b] = function () {
    $(this).dialog("close");
};
$("#div-dialog-warning").dialog({
    title: t,
    resizable: false,
    height: 160,
    modal: true,
    buttons: buttonOpts
});

You have to treat b as a variable, hence using buttonOpts[b] rather than what you did, which is the equivalent of using buttonOpts.b.

Answer 2

here's what you need to add afte ryou initialize your dialog:

 $('div.ui-dialog-buttonpane button:contains(b)').empty().html(b);

you'll probably want to rename b to be something a little more descriptive and unique though.