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!