Forcing jQuery UI dialog button focus

Question

I have several jQueryUI dialogs with Ok and Cancel and radio buttons (no text input).

My requirements are:

OK button should be right of the Cancel button and Ok button should be in focus:

1. when the dialog opens,
2. after any user click or drag.

Requirement no 1 can be implemented by giving the Ok button an id and the following code:
open: function(event, ui) { $('#OkButton').focus(); },

Requirement no 2 is harder. It could be implemented by defining focusing delegates for a lot of events:

• .ui-dialog-titlebar click
• .ui-dialog-buttonpane click
• dragStop
• etc

But surely there must be a simpler way?

Answer 1

Try this code. myDialog is main dialog div When you drag your dialog this will do the job

jQuery('.myDialog').bind('move', function(e) {
    $('#OkButton').focus();
}).bind('moveend', function() {});

and when you click on your dialog main div this will do the job.

jQuery('.myDialog').click(function(){
    $('#OkButton').focus();
});