表单提交后，jQuery ui选项卡仍保留在选项卡上

Question

Hi I'm using jQuery ui tabs Widget in a page with two tabs. Each page contains one form with the same page as an action. I need to stay in the tab where the form was submitted after the form is submitted. How can I accomplish that?.

Here's my code:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
  </ul>
  <div id="tabs-1">
    <p>I'm Tab1.</p>
       <p>I'm a Form using GET Method, passing values to this same page:<br></p>
       <p><form name="input" action="index.php" method="GET">
       <input type="text" name="value" id="somevalue" style="width:150px;"> <br>
       </form></p>
    <?
    if (isset($_GET)) {echo ($_GET['value']);}
    ?>
  </div>
  <div id="tabs-2">
    <p>I'm Tab2.</p>
     <p>I'm a Form using GET Method, passing values to this same page:<br></p>
       <p><form name="input" action="index.php" method="GET">
       <input type="text" name="value2" id="somevalue" style="width:150px;"> <br>
       </form></p>
    <?
       if (isset($_GET)) {echo ($_GET['value2']);}
    ?>
  </div>

</div>

Thanks in advance. Sebastian

Answer 1

You can achieve this by using jQuery.cookie plugin.

You need to save selected tab index to cookies and on each load of page read those cookie and select appropriate tab. Saving is made inside activate handler of tabs plugin (value of the active option will be saved)

$("#tabs").tabs({
    activate: function(event, ui){
        var active = $("#tabs").tabs("option", "active");
        $.cookie("activeTabIndex", active);
    }
});

To select needed tab at page load you need to read the cookie and set the active option on tabs. Here is the full $(document).ready code:

$(document).ready(function(){
    //initialize tabs plugin with listening on activate event
    var tabs = $("#tabs").tabs({
        activate: function(event, ui){
            //get the active tab index
            var active = $("#tabs").tabs("option", "active");

            //save it to cookies
            $.cookie("activeTabIndex", active);
        }
    });

    //read the cookie
    var activeTabIndex = $.cookie("activeTabIndex");

    //make active needed tab
    if(activeTabIndex !== undefined) {
        tabs.tabs("option", "active", activeTabIndex);
    }
});

Here is the Demo

(i removed the form s to make it work in jSFiddle; if you are staying on the same page after submitting your form , it will work)