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 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 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.

Answer 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)

Answer 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

Answer 5

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

Answer 6

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 7

You can refer to the link of the button that opens the tab, and write it in history. After that add "EventListener" we trace with its help the change of "window.location.hash" and at any change we artificially press the button with such a link. Thus, the transitions in the history with the help of the back button will work.

$(".btn").click(
        function () {
            window.location = this.href;
        });
    window.addEventListener('hashchange', function () {
        var x = `[href="${window.location.hash}"]`;
        $(x)[0].click();
    });