How to add history to jQuery UI tabs using a back button - 【StackMirror】|javascript|jquery

I've got a PHP file with 5 tabs (jquery ui). Tab four and five contain forms. Forms and tab work fine - expect to this: I submit the form (POST method not XHR), then click the right mouse button (Firefox and IE behave identical) and select back and then select tab five in the page by mouse click the entered form data is still available.

I try to build a link, that is more convenient for the user.

<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>

If click on my modify link, it still jumps back to tab one and the form fields in tab five are empty.

I read several posts about jQuery UI tabs and the back button, but all seem not to address my problem.

Where is my fault and is the difference between doing this steps by hand and my link with JS?

2012-04-05 14:59
by vbd

Sorry, what are you trying to achieve? I have done a number of forms like this, so hopefully can help. Do you want a back button that goes back on the browser and selects the last tab. Looking at the onClick code you want to go back a page and then select a tab - Adam Stacey 2012-04-05 15:18

I want to go back (like the back button of the browser) within tab five, like the form wasn't posted, so the user can make changes - vbd 2012-04-05 15:23

So, am I right in saying that lets say you were on tab 2 and then go to tab 4 your back button would want to go back to tab 2? Is that right? If so I can help - Adam Stacey 2012-04-05 15:29

I think this would help ;) But basically I would like to achieve the same, as when I hit the back button in the browser and select tab five again, but not manually (this works), I would like to do this with a simple link - vbd 2012-04-05 15:32

Following from the comments here is a function that will remember what your last tab was that you selected. It does rely on you using a set "Back" button.

The problem you will find, as far as I can see, is that you can't intercept a user clicking the browser back button. I have found that creating an obvious and clear back button on the site does the job and the feedback I have had so far on our sites seem to back that up.

The function is:

$(function() {
    var $previousTab = 0;
    var $backButtonUsed = false;    

    // Initialise tabs
    $("#tabs").tabs();

    $("#tabs").bind("tabsselect", function(event, ui) {
        if ($backButtonUsed)
        {
            $backButtonUsed = false;
        } else {
            $previousTab = $("#tabs").tabs('option', 'selected');
        }
        return true;
    });

    $("#back").live('click', function() {
        $backButtonUsed = true;
        $("#tabs").tabs({ selected: $previousTab });
        return true;
    });
});

I have also included this in a JSFiddle, so you can see it in action with the HTML and jQuery UI Tabs.

Let me know what you think.

2012-04-05 16:09
by Adam Stacey

I put it in my script.js and tested it. Works great for the tab selection! But when I hit the back button (id="back"), not the browser back button, the fields of the submitted form got cleared.. - vbd 2012-04-05 16:39

What I tend to do to stop this happening is to store the values in a session. On each tab I have a save button that saves the form data in a session via an Ajax call. Then I detect if the user clicks another tab or another link on the site and before that links is followed I show a message saying are you sure you want to leave without saving and give them the option to continue or save and continue. The only problem with this is that you still cannot account for the back button, but using a session to temporarily save the data means they can leave and come back. If that is of use let me know - Adam Stacey 2012-04-11 07:54

In the above comment when I say back button I mean the browser back button :- - Adam Stacey 2012-04-11 07:55

This helps a lot. I tried to avoid using sessions, due to problems in the past (firesheep). For me it looks like, that you can't mimic some browser features e.g. browser back button behave in another way than a link with history.back() or history.go(-1), at least in the state of a submitted/posted form - vbd 2012-04-11 08:58

I also found another way you can warn users before they leave your page, which might work with the back button. See http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own for more details. Not sure how cross-browser compatible it is or how good it is, but it sounds like another way round it :- - Adam Stacey 2012-04-11 12:01

Javascript stops executing once you leave the page that it's running on -- the second half of your onClick handler never runs.

2012-04-05 15:13
by duskwuff

How can I chain go back and select tab five with JS - vbd 2012-04-05 15:27