Question

Is there a way to control which buttons to display in a Jquery Dialog?

Scenario:

Perhaps there might be program logic whereby after saving the data, the dialog is then able to show a “Delete” button. (meaning after a form submit within the dialog, the entire dialog refreshes? >> this includes the buttons on the dialog being loaded?)

Any advice?

Answer 1

You can do this using the getter and setter methods on the buttons options on the jQuery dialog. The following example is taken from the jQuery UI docs:

//getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );

//setter
$( ".selector" ).dialog( "option", "buttons", [
    {
        text: "Ok",
        click: function() { $(this).dialog("close"); }
    }
] );

So in your example you could do:

Adding

// Get existing buttons
var buttons = $( ".selector" ).dialog( "option", "buttons" );

// Add a delete button
buttons.push({
    text: "Delete",
    click: function () {
        // Do your deletion stuff
    }
});

// Put the modified button Array back in
$( ".selector" ).dialog( "option", "buttons", buttons );

Removing

// Get existing buttons
var buttons = $( "#testDialog" ).dialog( "option", "buttons" );

$.each(buttons, function (i) {
    if (this.text === "Delete") {
        // We've found the button we want to delete so remove it from Array
        buttons.splice(i, 1);

        // No point in continuing the loop as we've removed what
        // we want to remove.
        return;
    }
});

// Put the modified button Array back in
$( "#testDialog" ).dialog( "option", "buttons", buttons );

Here’s a working example.