How to hide dialog buttons when a jQuery-ui dialog is opened

Question

When opening a jQuery-UI dialog, how can I hide a button (for instance, hide the "Save" button)?

<!-- head --> 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>

<!-- body -->
<div id="dialog" class="dialog" title="My Title"></div>
<a href="#" id="open">open</a>

// javascript
$(document).ready(function() {
    $('#open').click(function() {
        $("#dialog").dialog("open");
    });
    $("#dialog").dialog({
        autoOpen: false,
        height: 400,
        width: 350,
        modal: true,
        open: function() {
            var dialog = $(this);
            console.log('dialog', dialog);
            var buttons = dialog.dialog("option", "buttons");
            console.log('buttons', buttons);
            //Change names this way...
            buttons[0].text = 'Save2';
            buttons[1].text = 'Cancel2';
            dialog.dialog("option", "buttons", buttons);
            //How do I hide a button (i.e. hide Save button)?
        },
        buttons: [{
            text: 'SAVE',
            click: function() {
                alert('save');
                $(this).dialog("close");
            }
        }, {
            text: 'CANCEL',
            click: function() {
                $(this).dialog("close");
            }
        }]
    });
});

Salman Arshad · Accepted Answer · 2014-10-23 17:29:54Z

3

The easiest* way is to get a hold of the current dialog's widget element and .find() the button inside it:

open: function () {
    var $widget = $(this).dialog("widget");
    $widget.find(".ui-dialog-buttonpane button:first").hide();
}

Updated Fiddle

^{Easier than finding all the button elements on the page and guessing which one is which.}

answered Oct 23, 2014 at 17:29

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

4 Comments

user1032531 Over a year ago

Ah, I see. Thank you. Just curious, why can't the button object be manipulated to do so?

Salman Arshad Over a year ago

The buttons object does not refer to the HTML buttons inside the dialog. It refers to the options used to generate (or regenerate) the buttons.

user1032531 Over a year ago

Would it be best to also use the widget to change the names unlike how I did it?

Salman Arshad Over a year ago

You can but I am not sure. If you change the text of the button directly (actually that of the span inside it) the $(".dialog").dialog("option", "buttons")[0].text will contain a now-out-of-sync value.

jroot · Accepted Answer · 2014-10-23 17:23:48Z

1

I just added an id to the button, and updated the click function to hide it.

$(document).ready(function () {

    $('#open').click(function () {
        $("#dialog").dialog("open");
        $("#save").hide();
    });

    $("#dialog").dialog({
        autoOpen: false,
        height: 400,
        width: 350,
        modal: true,
        open: function () {
            var dialog = $(this);
            console.log('dialog', dialog);
            var buttons = dialog.dialog("option", "buttons");
            console.log('buttons', buttons);
            //Change names this way...
            buttons[0].text = 'Save2';
            buttons[1].text = 'Cancel2';
            dialog.dialog("option", "buttons", buttons)
            //How do I hide a button (i.e. hide Save button)?
        },
        buttons: [{
            text: 'SAVE',
            id: "save",
            click: function () {
                alert('save');
                $(this).dialog("close");
            }
        }, {
            text: 'CANCEL',            
            click: function () {
                $(this).dialog("close");
            }
        }]
    });

});

http://jsfiddle.net/ba6jwh54/2/

answered Oct 23, 2014 at 17:23

jroot

3201 silver badge10 bronze badges

1 Comment

user1032531 Over a year ago

Thanks jroot, but I would like to hide it within the dialog script for maintenance purposes. Also, didn't want to add an ID to the button.

Collectives™ on Stack Overflow

How to hide dialog buttons when a jQuery-ui dialog is opened

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related