Trigger a button click inside a jQuery UI Dialog

Question

it is a very simple question that I'm not finding an answer for it. I have a dialog and in some events happening inside the dialog I want to click one of the dialog buttons. The code which defines the dialog is:

var dialog = $('<div>').dialog({
    autoOpen: false,
    title : title,
    resizable : false,
    buttons : {
        'CANCEL' : {
            text : messages.Cancel,
            click : function(){$(this).dialog('close')}
        },
        'OK' : {
            text : messages.Ok,
            click : okButtonCallback
        }
    }
});

and in my event I can get the dialog, find the buttons but I can not trigger the click event with right reference passed as this. I do this:

buttons = dialog.dialog('option', 'buttons');

and I have the buttons each of them has the click function. If called directly or through trigger('click'), they call the click event of button but with the button itself as this not the dialog object. I saw somewhere to call

buttons['OK'].apply(dialog);

but my buttons have absolutely no apply function!

I'm not sure what can I do!

If you can get a reference to the button it should be as simple as button.click(); or $(button).click(); — BNL
– BNL, Commented Sep 23, 2011 at 14:56
as stated in question, it does not pass the right reference as this inside the function. — mohamnag
– mohamnag, Commented Sep 24, 2011 at 14:54
i'm a little late on this, but oddly enough i did it your way, "buttons['Ok'].apply(dialog);" and it worked. i tried "buttons['Ok'].click.apply(dialog);" but it didn't work. — Khon Lieu
– Khon Lieu, Commented Jun 29, 2012 at 18:59
Same here - "buttons['OK'].apply(dialog)" is what worked for me too. — Kirk Liemohn
– Kirk Liemohn, Commented Aug 8, 2012 at 17:47
according to new Jquery UI documentation, you need to retrieve a button from array with index like buttons[1].click.apply(dialog); — ttacompu
– ttacompu, Commented Nov 14, 2014 at 16:30

Peter K. · Accepted Answer · 2016-04-29 14:14:23Z

15

First of all, you need to get buttons[0] not buttons['OK'], then, it's not a function it's an object, try to get to click function like this :

buttons[0].click.apply(dialog);

edited Apr 29, 2016 at 14:14

Peter K.

8,0974 gold badges53 silver badges77 bronze badges

answered Sep 23, 2011 at 14:58

Shlomi Komemi

5,5453 gold badges31 silver badges43 bronze badges

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

1 Comment

Dan D Over a year ago

oh no, for my case, latest jquery ui (june 2019), it's buttons.OK and not buttons[0]. Further more, buttons.OK is a function.

aziz punjani · Accepted Answer · 2011-09-23 14:59:20Z

15

$('.ui-button:contains("Ok")').click()

answered Sep 23, 2011 at 14:59

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

2 Comments

streetlight Over a year ago

I'm using this particularly for testing in qUnit, and it's invaluable!

mohamnag Over a year ago

I think you didn't read the last part of my question, the click() function or trigger('click') works but when doing it like that this inside the click function does not refer to dialog (as it refers to when user clicks on button) but refers to button itself. my problem was how to overcome this difference and I solved it.

Ailton F. Silva Amorim · Accepted Answer · 2013-09-21 16:51:03Z

6

What I use is:

// Get the buttons
var buttons = $("#myDialog").dialog("option", "buttons");
// Calls the event
buttons["OK"]();

answered Sep 21, 2013 at 16:51

Ailton F. Silva Amorim

631 silver badge6 bronze badges

1 Comment

Dan D Over a year ago

i call 'close' inside 'OK', and error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Collectives™ on Stack Overflow

Trigger a button click inside a jQuery UI Dialog

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related