jquery ui-tabs focus first text box in selected tab

Question

In previous versions I wrote following code to focus first text box of the selected tab:

$(".ui-tabs-panel:not(.ui-tabs-hide) input[type='text']:first").focus();

This no longer works as ui-tabs-hide was removed as of version 1.9.x.

How can I target the first input of the active tab?

Here I put my full code.

$(function() {  
$("input:submit, button").button();  
$("#tabs").tabs({  
beforeLoad: function(event, ui) {  
       ui.ajaxSettings.type = 'POST';  
                    ui.jqXHR.error(function() {
                        ui.panel.html(
                                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                "If this wouldn't be a demo.");
                    });
                }, beforeActivate: function(event, ui) {
                   try {
                        frmGlbObject.validationEngine('hideAll');
                    } catch (e) {
                    }
                },
                load: function(event, ui) {
                    var tabindex = $(ui.tab).index();
                    tableListIndex = tabindex;
                    frmGlbObject = $(".ui-tabs-active input[type='text']:first").closest("form");
                    $(".ui-tabs-active input[type='text']:first").focus();
                    frmGlbObject.validationEngine('attach');
                    divGlbObject = $(frmGlbObject).find(".clsdivs");
                    txtGlbObject = $(frmGlbObject).find(".clsajaxcall[type='text']")
                    hdnGlbObject = $(frmGlbObject).find(".clsajaxcall[type='hidden']")
                    $(".ui-tabs-panel").css('background-color', '#ddddff');

                    if (tabindex == 0) {
                        fun1();
                    } else if (tabindex == 1) {
                        fun2();
                    } else if (tabindex == 2) {
                        fun3();
                    }
                }, activate: function(event, ui) {
                    $(".ui-tabs-active input[type='text']:first").focus();
                    frmGlbObject = $(".ui-tabs-panel:not(.hide) input[type='text']:first").closest("form");
                    divGlbObject = $(frmGlbObject).find(".clsdivs");
                    txtGlbObject = $(frmGlbObject).find(".clsajaxcall[type='text']")
                    hdnGlbObject = $(frmGlbObject).find(".clsajaxcall[type='hidden']")
                    $(".ui-tabs-panel:not(.hide) input[type='text']").bind("keydown", function(e) {
                        var n = $(".ui-tabs-panel:not(.hide) input[type='text']").length;
                        if (e.which == 13) {
                            e.preventDefault(); //Skip default behavior of the enter key
                            var nextIndex = $(".ui-tabs-panel:not(.hide) input[type='text']").index(this) + 1;
                            if (nextIndex < n)
                                $(".ui-tabs-panel:not(.hide) input[type='text']")[nextIndex].focus();
                            else {
                                //$(':input:not(input[type=hidden])')[nextIndex-1].blur();
                                //$('.clsbtnsubmit').click();
                            }
                        }
                    });
                }
            });

        }); 

Here I have two problem :

1. frmGlbObject = $(".ui-tabs-panel:not(.hide) input[type='text']:first").closest("form");

2. $(".ui-tabs-active input[type='text']:first").focus();

The above statement is not working in Jquery Latest version .

Thanks

Answer 1

Why not target ui-state-active or ui-tabs-active instead?

$('.ui-state-active input[type="text"]:first').focus();

That'll focus the first input[type="text"] of the active tab.

Or bind a listener to the tabsactivate event:

$('.selector').on('tabsactivate', function( event, ui ) {
    // focus input
});

See Tabs API Docs

Answer 2

$("#tabContainer").tabs("option", "active", 1);
          $('#ContentPlaceHolder1_txtboxID').focus();