JQuery UI tab won't work until a tab is clicked twice

Question

I am using jQuery ui tabs with the script below:

JS

$(document).ready(function() {
    var tab_index = $('#tab_index').attr('value');
    $('#tabs').tabs({ cache:true,
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible.");
            }
        },
    });
    $('#tabs').tabs('option', 'active', tab_index);
});

HTML

<input id="tab_index" type="hidden" value="<?php echo $tab_index; ?>" />

<div id = "tabs">
<ul>
    <li><a href="tabs/current_portfolio.php">Current Portfolio</a></li>
    <li><a href="tabs/realised_gain_loss.php">Realised Gain / Loss</a></li>
    <li class = "tab_trade_list"><a href="tabs/add_trades.php">Add Trades</a></li>
    <li><a href="tabs/test.php">Test</a></li>
</ul>
</div>

Where $tab_index is a numeric value generated dynamically from a PHP script based on different scenarios.

The strange thing is that when the page is loaded, I need to click on a tab twice before it is selected, but it would work normally after that, until the page is refreshed and the problem returns. Any idea of how to resolve this will be much appreciated. Many thanks!

Answer 1

I don't use tabs in conjunction with ajax content but comparing your example against the demo example at http://jqueryui.com/tabs/#ajax I see a few things:

You have $('#tabs').tabs({ cache:true, but I don't see that as part of the tabs api

Looks like you are loading the fist tab via ajax as well? Is that part of the problem? When you initially load the page and click a tab does firebug or the IE developer tools tell you anything is wrong?

In response to your comment below...I use the following:

$(document).ready(function() {    
    var setTab = $("#setTab").val();
    $("#iTABs").tabs("select", setTab);
})

In conjunction with this (on page tabs.php):

<div id="iTABs">
    <ul>
        <li><a tabindex="-1" href="#tabs-1">Tab Title</a></li>
        <li><a tabindex="-1" href="#tabs-2">Tab 2 Title</a></li>
        <!-- Repeat for each tab you need -->
    </ul>
</div>
<div id="tabs-1">Fancy tab content</div>
<div id="tabs-2">Fancy tab 2 content</div>
<input type="hidden" id="setTab" value="<?php echo $_GET['sTab'];  //2 ?>">

With that when a user goes to tabs.php?sTab=2 The tab strip opens to Tab 2 and the tab 2 content is shown. No fancy ajax stuff there...

Also, (not part of the issue but just in general) you use:

var tab_index = $('#tab_index').attr('value'); 

You could just use:

var tab_index = $('#tab_index').val();