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!

Solution 1

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;
    })
});

Solution 2

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.

Solution 3

Update: The solution I posted does not fix the problem I described ^^ will post again if I remember when I solve it. Update2: I've "solved" the problem for now (see below).

Question is a bit old, but if anyone stumbles on this question as I did, a quick change to the above solution by Justin Hamade might help some people.

If you use Jquery Address' externalChange event instead of just "change" it prevents sending a superfluous request (in my case resulting in a error in the javascript console). This is because if someone clicks a tab the address changes on its own (thanks to jquery ui), thsi change triggers $.address.change once, which selects a tab even though jquery-ui has already done so... At least I think thats what was going on.

Also I did not like the tabs creating hashes like "#ui-tab-2", "#ui-tab-3" etc, so I used the following code which makes the urls use the names of the anchor elements as the hashes (i.e. "www.example.com#cool_stuff" instead of "www.example.com#ui-tab-2"):

$(function() {
  $( "#tabs" ).tabs({
    cache: false,
  });

  // For forward and back
  $.address.externalChange(function(event){
    var name = window.location.hash != "" ? window.location.hash.split("#")[2] : ""
    $("#tabs").tabs( "select" , $("#tabs a[name="+ name + "]").attr('href') )
  });
  // when the tab is selected update the url with the hash
  $("#tabs").bind("tabsselect", function(event, ui) { 
    $.address.hash(ui.tab.name);
  });

});

However, A) I'm new to jquery and not sure this is efficient / safe / "The Right Way To Do It", and B) Be sure to use this only if you can be sure the 'name' attribute of the anchors does not have any characters that are not URI safe (i.e. space).

Update2: I've "solved" the problem in Update1 for now, but it has the terribly ugly line:

var name = window.location.hash != "" ? window.location.hash.split("#")[2] : ""

Because apparently the $.address.hash(val) function adds a "/#" after the first hash, but if we don't use the $.address.hash(val) then externalChange is triggered (by window.location.hash=val)

Solution 4

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

Solution 5

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

View more solutions