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
– xtempore, Commented Jul 16, 2015 at 7:35

James Allardice · Accepted Answer · 2012-02-15 20:26:37Z

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, 2012 at 20:26

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tempid Over a year ago

You beat me to it. I was going to answer the question myself. Works perfectly. Thank you very much!

xtempore · Accepted Answer · 2015-07-16 07:34:35Z

6

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();

answered Jul 16, 2015 at 7:34

xtempore

5,5554 gold badges41 silver badges47 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:00:07Z

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, 2017 at 12:00

CommunityBot

11 silver badge

answered Feb 15, 2012 at 20:28

GregM

2,6643 gold badges24 silver badges37 bronze badges

Comments

frictionlesspulley · Accepted Answer · 2012-02-15 20:34:58Z

0

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');
    });
});

answered Feb 15, 2012 at 20:34

frictionlesspulley

12.5k16 gold badges73 silver badges124 bronze badges

Collectives™ on Stack Overflow

jQuery-ui dialog - hide buttons using jquery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related