Search code examples
javascriptjqueryjquery-uitabsjquery-ui-tabs

JQuery UI tabs wont save selected tab index upon page reload

When I use AJAX or PHP POST the page reloads and the tabs bounce back to index position 0, which is quite annoying. You can find the code below. I am trying to save the tab index in a cookie and use it to return to the selected tab even after the page reloads.

The code is here:

$(function() {
    $( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
    $(document).ready(function() {
       $( "#tabs" ).tabs('select', $.cookie("tabNumber"));

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

Maybe someone can help me to find out how to make it work?

Solution

  • http://docs.jquery.com/UI/Tabs#option-cookie

    Initialize a tabs with the cookie option specified.

    $( ".selector" ).tabs({ cookie: { expires: 30 } });