Question

I have two sets of tabs, one nested inside the other. The nested tabs get reloaded by a setInterval that refreshes all of the content. On page load, the cookie for those nested tabs gets set fine, but once the refresh happens, it goes away and the selected tab just jumps back to the first. Here’s an image of what it looks like: http://screencast.com/t/nAZlNXIBe
So when I am under the Assigned tab, and click the Normal tab, I’d expect it to stay on the Normal tab when the setInterval kicks in and refreshes those tabs. Here’s the code I’m using:

var $tabs2  = $('#nested').tabs({ cookie: { expires: 1, name: "nested_tabs" } });
setInterval(function() {
  $('#tabs-1 .content').load('/dashboard/mine'); 
}, 30000);

This code basically just sets the tabs and the cookie, then the refresh happens to populate that whole area, including the tabs. Would it be breaking because the tabs are being reloaded with the ajax as well?

Answer 1

Ok I figured it out, here’s the code:

var $tabs2  = $('#nested').tabs();
$tabs2.bind('tabsselect', function(event, ui) {
  $.cookie('nested_tabs', ui.index);
});
setInterval(function(){
  $.ajax({   url: '/dashboard/mine',   success: function(html){
    $tabs2.tabs("destroy");
    $('#tabs-1 .content').html(html);
    $tabs2  = $('#nested').tabs({ selected: $.cookie('nested_tabs') });
    $tabs2.bind('tabsselect', function(event, ui) {
      $.cookie('nested_tabs', ui.index);
    });  
  }          
});