Question

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?

Answer 1

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.