How to hide button on the Jquery UI dialog box

Question

I have been using JQuery UI dialog box.The following code I am using.Can any one please let me know how to hide the Export button after click

$( "#dialog-confirm1" ).dialog({
            resizable: false,
            height:350,
            width:650,
            modal: false,
            autoOpen:false,
            buttons: {
                "Export": function() {
                    exportCSV(2);


                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

When you say "hide the Export button", you mean leave the dialog box open with only the cancel button? — Ram, Jul 28 '11 at 12:40

Nicola Peluchetti · Accepted Answer · 2011-07-28T12:53:45.263

9

You could use $('.ui-button:contains(Export)').hide(): (the following code hides the export button when you click it)

$( "#dialog-confirm1" ).dialog({
            resizable: false,
            height:350,
            width:650,
            modal: false,
            autoOpen:false,
            buttons: {
                "Export": function() {
                    exportCSV(2);
                    $(event.target).hide();


                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

edited Jul 28 '11 at 12:53

answered Jul 28 '11 at 12:39

Nicola Peluchetti

76,206
31
145
192

Hi,Nicola Thanks, it works.But forgot to tell.I do have two dialog boxes dialog-confirm1 and dialog-confirm0 and both have "Export" button and when I click Export button of dialog-confirm1 dialog box it also hides Export button of dialog-confirm dialog box.Thanks, Ravi – Ravi Bhartiya Jul 28 '11 at 12:48
@Ravi i think that the better option is what Frédéric Hamidi pointed out, use event.target (i updated my answer to use it) – Nicola Peluchetti Jul 28 '11 at 12:54
event.target goes to the span inside the button, not the button itself. Use: $(event.target).parent().hide(); instead. – Redtopia Aug 15 '18 at 17:59

score 4 · Answer 2 · answered Jul 28 '11 at 12:40

4

The documentation for the buttons option says:

The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.

Therefore, you can use event.target to refer to the button element:

buttons: {
    "Export": function(event) {
        $(event.target).hide();
        exportCSV(2);
    },
    "Cancel": function() {
        $(this).dialog("close");
    }
}

answered Jul 28 '11 at 12:40

Frédéric Hamidi

258,201
41
486
479

Use $(event.target).parent().hide(); instead. At least for me, the target is the span inside the button. – Redtopia Aug 15 '18 at 18:00

score 0 · Answer 3 · answered Jul 28 '11 at 12:40

0

buttons: [{
    "Export": function() { exportCSV(2); },
    click: $( this ).hide()

}]

answered Jul 28 '11 at 12:40

Phil

10,948
17
69
101

How to hide button on the Jquery UI dialog box

3 Answers3