Set Jquery ui active tab on page load/reload

I'm using a basic implementation of Jquery UI Tabs that are working fine but I want to set (or reset) the active tab dynamically based on a user action.

How can I set the active tab based on a querystring value? With my previous tab solution I was able to pass a querystring value and set the active tab when the page loaded. (I had to abandon this older solution due to other technical challenges.)
When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?
How can I set the active tab when a user returns to the Tasks page of my browser application? For example, all within my web application, if the user browses to the Projects page and then returns to the Task page, how can I reset the tab they were previously on?

Javascript:

$(function() {
   $("#tabs").tabs();
});

HTML Example code:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Description</a></li>
        <li><a href="#tabs-2">Action</a></li>
        <li><a href="#tabs-3">Resources</a></li>
        <li><a href="#tabs-4">Settings</a></li>
    </ul>

<div id="tabs-1">
    <p>Description content</p>
</div>

<div id="tabs-2">
    <p>Action content</p>
</div>

<div id="tabs-3">
    <p>Resources content</p>
</div>

<div id="tabs-4">
    <p>Settings </p>
</div>

</div>

Solution 1:

I solved my own jQuery tab issues after additional research and trial and error. Here's a working example. I don't know if this is the most elegant solution but it works. I hope this helps.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.10.1.custom.min.css">
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-ui-1.10.1.custom.min.js"></script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("#tabs").tabs({active: document.tabTest.currentTab.value});

            $('#tabs a').click(function(e) {
                var curTab = $('.ui-tabs-active');
                curTabIndex = curTab.index();
                document.tabTest.currentTab.value = curTabIndex;
            });
        });
    </script>
</head>

<body>
    <form name="tabTest" method="post" action="tab">
        <!-- default tab value 2 for Tab 3 -->            
        <input type="hidden" name="currentTab" value="2"/> 
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Tab 2</a></li>
                <li><a href="#tabs-3">Tab 3</a></li>
            </ul>
            <div id="tabs-1">Tab 1 Content</div> 
            <div id="tabs-2">Tab 2 Content</div>
            <div id="tabs-3">Tab 3 Content</div>
        </div>
    </form>
</body>

Here's how I answered each of my previous questions.

1. How can I set the active tab based on a querystring value? I ended up not needing to use a querystring. I added the #tabs-x to the end of my url. For example, if I wanted a link directly to Tab 3 I coded a link as:

localhost:8080/pm/detail?prjID=2077#tabs-3

2. When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?

I solved this by capturing the click event, getting the current tab index and then setting a hidden forms element "currentTab" to store the current tab value. Then back in the Java Servlet I retrieved the hidden forms elements and reset it when the page reloads.

$(document).ready(function() {
        // Set active tab on page load
        $("#tabs").tabs({active: document.tabTest.currentTab.value});

        // Capture current tab index.  Remember tab index starts at 0 for tab 1.
        $('#tabs a').click(function(e) {
            var curTab = $('.ui-tabs-active');
            curTabIndex = curTab.index();
            document.tabTest.currentTab.value = curTabIndex;
        });
    });

3. How can I set the active tab when a user returns to the Project page of my browser application? For example, all within my web application, if the user browses to the Task page and then returns to the Project page, how can I reset the tab they were previously on?

This is solved by setting a session variable in my Java Servlet to store the hidden forms element "currentTab". That way when I return the Project page, I can reset the "currentTab" value the same way I set it in the Save forms action.

I hope this example can help someone else with their jQuery tab issues!

Set Jquery ui active tab on page load/reload

Solution 1:

Related

Recent Posts