jQuery-ui dialog - hide buttons using jquery

Question

How do I remove/hide the "Ok" button dynamically using jquery?

$('#dialog-save').dialog({
            autoOpen: false,
            modal: false,
            draggable: true,
            width: 275,
            height: 175,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
        });

I was able to change the title using this code -

var saveDialog = $('#dialog-save');
saveDialog.dialog('option', 'title', 'Message');

Not sure how to remove the buttons. Thanks!

You can also consider just including an id when you create the button, so that you can access and manipulate it later (see below). — xtempore, Jul 16 '15 at 07:35

score 10 · Accepted Answer · answered Feb 15 '12 at 20:26

10

You can set the buttons option in the same way you are setting the title:

saveDialog.dialog("option", "buttons", {});

Pass in an empty object literal to remove all the buttons. That should be fine, since you appear to only have the one button. If you were to have others, just specify the ones you want to keep when you call the option method.

answered Feb 15 '12 at 20:26

James Allardice

164,175
21
332
312

You beat me to it. I was going to answer the question myself. Works perfectly. Thank you very much! – tempid Feb 15 '12 at 20:30

score 6 · Answer 2 · answered Jul 16 '15 at 07:34

One commonly overlooked feature of the UI dialog is that you can set various other properties of the buttons, including 'class' and 'id'. These can be very useful if you need to manipulate the buttons after instantiation.

For example...

$('#dialog-save').dialog({
        autoOpen: false,
        modal: false,
        draggable: true,
        width: 275,
        height: 175,
        {
            id: 'okBtn',
            text: "Ok",
            click: function () {
                $(this).dialog("close");
            }
        }]
    });

// And then at some other point in the code...
$('#okBtn').remove();

score 0 · Answer 3 · edited May 23 '17 at 12:00

0

Juste like this won't show the button :

$('#dialog-save').dialog({
        autoOpen: false,
        modal: false,
        draggable: true,
        width: 275,
        height: 175
        }
    });

And if you want to remove them after you have shown the dialog Maybe something like this;

How can I disable a button in a jQuery dialog from a function?

edited May 23 '17 at 12:00

Community

1
1

answered Feb 15 '12 at 20:28

GregM

2,634
3
22
37

score 0 · Answer 4 · answered Feb 15 '12 at 20:34

Try this fiddle

$(function(){
    $('#dialog-save').dialog({
            autoOpen: false,
            modal: true,
            draggable: true,
            width: 275,
            height: 175,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
    });
    $('#dialog-save').dialog('open');
    $('.change').click(function(){
        $('#dialog-save').dialog("option",{buttons:{}});
        $('#dialog-save').dialog('open');
    });
});

jQuery-ui dialog - hide buttons using jquery

4 Answers4

Linked