jQuery UI Tabs-Cookie与选择刚刚添加的选项卡之间发生冲突？

Question

I am using jquery.cookies to keep a tab selected after refresh.

I would also like that as soon as a new tab is created, it is selected.

Using jQuery UI instructions I currently have:

    var cookieName = 'stickyTab';

    $(".tabs").tabs({
        fx: {
            opacity: 'toggle',
            duration: 'fast'
        },
        selected: ( $.cookies.get( cookieName ) || 0 ),
                    select: function( e, ui )
                {
                $.cookies.set( cookieName, ui.index );
                }
    });

    var $tabs = $('.tabs').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});

Unfortunately this doesn't work -- when I create a new tab, the one that was previously open remains selected (maybe because the cookie is overriding the select function?

My tabs are created via PHP POST and data is retrieved from DB and looped to create LI and DIV elements. (ie, my tabs are not created directly from JS).

Anyone have suggestions to resolve this?

Thanks!

Answer 1

Your bug stems from the fact you're only updating your cookies via JavaScript, but are adding new tabs via PHP on page reloads. This results in new tabs being appended but not synced with your cookie.

Since the jQuery UI Tabs selected property is an index. And you're tabs are created via an array, a simple:

setcookie('stickyTab',count($array)-1);
// this will set the selected tab to the last appended tab

Take note you only need to run this statement when new tabs are appended. Otherwise you will overwrite the cookie set via JS.

If you have any more issues, be sure to comment and we'll try and fix.