Jquery tabs won't select from the index

Question

I am using ASP.NET page with updatepanels and Jquery UI tabs. However, I'm having a problem with it. When I click on a button it should set the value of a hidden field which when the page posts back, it will select the new tab.

So in document onload set the tab to the initialised value of the hidden field:

$(function()
    {
        var loadTab = $("#<%= hidTabSelected.ClientID %>").val();

        $('#dvJqTabs').tabs( 
            { selected: loadTab ,   
              select: saveTab                    
            }
        )
    });

Now when I want to change the tab, in the ASP.NET page button click handler I do some processing and finally set hidTabSelected = 1 (previously 0). When the page posts because I am in UpdatePanels I won't get a doc ready event. So instead I intercept the pageLoad() and attempt to set the tab again:

function pageLoad()
    {
        alert('pageLoad()');
        var loadTab = $("#<%= hidTabSelected.ClientID %>").val();
        $('#dvJqTabs').tabs( { selected: loadTab } );
    }

The tab is not getting selected? If I go into console of firebug and inspect $("#hidTabSelected").val() I get 1. So why isn't the 2nd tab showing?

Answer 1

Keep in mind, the pageLoad() is called on both the initial load and on PostBack load during callback. I think your issue is that the element is already a tab so you just need to call a method on it after the callback like so:

function pageLoad()
    {
       var loadTab = $("#<%= hidTabSelected.ClientID %>").val();
        $('#dvJqTabs').tabs( "select", loadTab } );
    }

Answer 2

If you pass a string to the select function, it tries to match it to the hash of the tab's anchor, you can see the code for that here. From the docs:

Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).

Instead you want the select by index, so it needs to not be a string. For that use parseInt(), like this:

function pageLoad()
{
    var loadTab = parseInt($("#<%= hidTabSelected.ClientID %>").val(), 10);
    $('#dvJqTabs').tabs( { selected: loadTab } );
}