CODEWITHSUNDEEP
jquery-uijquery-ui-dialog
tonyf
tonyf

Reputation: 35539

Setting the focus to a field in a jQuery UI Dialog Box

I am using a jQuery-UI dialog box that has three fields on it together with an 'Update' and 'Cancel' buttons.

When the dialog is opened, I would like to have the focus set to the first field in that dialog, say it was calle 'ID' but from the looks of it, the focus is set to my 'Cancel' button.

How can I override this and have the focus set to 'ID' field when opened?

Upvotes: 1

Views: 2995

Answers (2)

Sunil Kumar Sahoo
Sunil Kumar Sahoo

Reputation: 53647

To set default focus on cancel button pass the index of the button. The default focus is on first button ie index 0. To set focus on second element you can use following code

$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();

Source code to create a dialog with two buttons and set focus on a button

     $(function() {                         
           $( "#dialog:ui-dialog" ).dialog( "destroy" );    
           $( "#dialog" ).dialog({
           modal: true,
           minHeight:200,
           minWidth:190,
           buttons: {
           Delete: function() {
            // do something                                                                     
           },
           Cancel: function() {
           $( this ).dialog("close");                               
           }
           }
     });
//to set focus on cancel button
          $(this).parents('.ui-dialog-buttonpane button:eq(1)').focus(); 
     });

Upvotes: 0

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21366

here the open function is called after the dialog box open happens. 

$( ".selector" ).dialog({
   open: function(event, ui) {
     $('#yourText').focus();
   }
});

Upvotes: 1

Related Questions