How to hide button on the Jquery UI dialog box [duplicate]

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
– Ram, Commented Jul 28, 2011 at 12:40

Nicola Peluchetti · Accepted Answer · 2011-07-28 12:53:45Z

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, 2011 at 12:53

answered Jul 28, 2011 at 12:39

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

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

3 Comments

Ravi Bhartiya Over a year ago

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

Nicola Peluchetti Over a year ago

@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)

Redtopia Over a year ago

event.target goes to the span inside the button, not the button itself. Use: $(event.target).parent().hide(); instead.

Frédéric Hamidi · Accepted Answer · 2011-07-28 12:40:42Z

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, 2011 at 12:40

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

1 Comment

Redtopia Over a year ago

Use $(event.target).parent().hide(); instead. At least for me, the target is the span inside the button.

Phil · Accepted Answer · 2011-07-28 12:40:44Z

0

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

}]

answered Jul 28, 2011 at 12:40

Phil

11.2k18 gold badges73 silver badges106 bronze badges

Collectives™ on Stack Overflow

How to hide button on the Jquery UI dialog box [duplicate]

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Related