jQuery UI Tabs back button history

Question

Has anyone been able to get jQuery UI Tabs 3(Latest version) working with the back button?

I mean if the user hits the back button they should go to the previously visited tab on the page, not a different page.

The history plug in sounds like it can work, but i cant seem to make it work with ajax loaded tabs.

If anyone has managed to make this work, it would be deeply appreciated, thanks!

Answer 1

I would suggest taking a look at this: http://www.asual.com/jquery/address/ it allows you to do deep linking, along with your AJAX calls.

Answer 2

It would appear that back button support is currently not built into the jQuery UI tabs: http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

Answer 3

The jQuery History/Remote plugin does that. The creators of the Tabs and History/Remote plugins are the same person, and has them working together here.

Answer 4

I just ran into this as well. Its really easy with the jquery address plugin here http://www.asual.com/jquery/address/

The demo for tabs seemed a bit over complicated. I just did this:

$('document').ready(function() {
// For forward and back
$.address.change(function(event){
  $("#tabs").tabs( "select" , window.location.hash )
  })
// when the tab is selected update the url with the hash
$("#tabs").bind("tabsselect", function(event, ui) { 
  window.location.hash = ui.tab.hash;
  })
}

Answer 5

I'm curently using this plugin: http://flowplayer.org/tools/demos/tabs/ajax-history.htm