Jquery tabs with cookie support restore wrong tab position after page refresh.

Question

Hello, all. I have tricky problem which I can't completely understand... It's jquery tabs with cookie support. I've following code:

$(document).ready(function() {
var $tabs = $("#tabs").tabs();

$tabs.tabs('select', $.cookie("tabNumber"));

$('#tabs ul li a').click(function() {
    $.cookie("tabNumber", $tabs.tabs('option', 'selected'));
});

$('#btnSelect').click(function() {
    //alert($.cookie("tabNumber"));
    //$tabs.tabs('select', 2);
    $tabs.tabs('select', $.cookie("tabNumber"));
});

});

So, I've 3 tabs (with positions 0,1,2) inside div named "tabs". When user selects one tab, then tab position stores in cookie. After that if user refresh page, active tab position must be restored. But each time I refresh page I get active tab in previous position (if I select 2nd tab, then after refresh I got active tab in position 1, etc.). I add some test in code (button btnSelect with onclick handler which duplicates load position functionality). So, if I uncomment and use

$tabs.tabs('select', 2);

Then after I click btnSelect I've got right position. Ok, that's right. Then I comment that line and uncomment next one:

alert($.cookie("tabNumber"));

So, I select tab, click button, get dialog message "2", and after that tab in position 1 became active. Why?? In both cases I call 'select' method with parameter 2...

I know I can use aliases for tabs, but I want to understate why my code doesn't work properly.

Answer 1

is it possible that the parameter needs to be a number try changing your line to:

$tabs.tabs('select', Number($.cookie("tabNumber")));

Answer 2

Why not to try "cookie" option parameter when you initialize your ".tabs()" ? like:

$('selector').tabs({
  cookie:{/* any available parameter for this option, */}
  // all of them well described at http://jqueryui.com/demos/tabs/#option-cookie
});