jquery tabs back button

Question

This post talks about the problem that jQuery tabs is still having with the back button. What the customer needs is fairly simple - when they press back, they want to go back to what they were just looking at. But jQuery tabs loads the first tab, not the one that was selected when the user left the page.

I've read the accompanying link and it says "It is planned and Klaus is working on it whenever he finds the time."

Has anyone solved the back button problem with jQuery UI tabs?

Atli · Accepted Answer · 2009-11-24T21:53:56.927

Using the solution to the history problem easement posted, a dirty fix for the back button problem would be to periodically check the location.hash to see if it has changed, and if it has, fire the click event of the appropriate link.

For example, using the zachstronaut.com updated jQuery Tabs Demo, you could add this to the $(document).ready callback, and it would effectively enable the back button to switch tabs, with no more than a 500ms delay:

j_last_known_hash = location.hash;
window.setInterval(function() {
    if(j_last_known_hash != location.hash) {
        $('#tabs ul li a[href="'+ location.hash +'"]').click();
        j_last_known_hash = location.hash;
    }
}, 500);

score 2 · Answer 2 · answered Nov 23 '09 at 20:51

2

Have you tired updating the browsers location as you switch tabs? http://www.zachstronaut.com/posts/2009/06/08/jquery-ui-tabs-fix.html

answered Nov 23 '09 at 20:51

easement

6,119
3
29
36

Both this answer and the answer above helped with the solution that I needed. With just your solution, it would come back to the correct tab but if you switched between multiple tabs the back button was broken without the script above to check every 1/2 second if the hash has changed. – billvsd Apr 27 '13 at 22:47

score 0 · Answer 3 · answered Dec 18 '13 at 20:58

if you had a class on your tab container that was tabContainer, to update the url when user clicks a tab, you could do this:

    $(".tabContainer").tabs({
        select: function(event, ui) {
            window.location.hash = ui.tab.hash;
        }
    });

then, instead of firing click, you could use the tabs select method if you have some getIndexForHash method that can return the right tab number for the selected hash value:

    var j_last_known_hash = location.hash;
    window.setInterval(function() {
        var newHash = location.hash;
        if(j_last_known_hash != newHash) {
            var index = getIndexForHash(newHash);
            $('.tabContainer').tabs("select",index);
            j_last_known_hash = newHash;
        }
    }, 100);

I borrowed heavily from Atli's answer but just replaced the part where click was invoked with invoke of select method. — David Hollowell - MSFT, Dec 18 '13 at 20:59
and I should mention, 500ms is a long time for user to interact with other things, and for things to feel non-responsive. reducing to 100ms. — David Hollowell - MSFT, Dec 18 '13 at 21:00

score 0 · Answer 4 · answered Aug 05 '21 at 00:42

0

window.onhashchange = function () {
  const $index = $('a[href="' + location.hash + '"]').parent().index();
  $('.tabContainer').tabs('option', 'active', $index);
}

answered Aug 05 '21 at 00:42

Eugene Chechel

1

jquery tabs back button

4 Answers4