Retain JQuery UI tab selection even after form post

I'm using JQuery UI tabs where I have several forms within tabs. What I want is to Retain Tab Selection even after Form Post.

I don't want to use cookie.js

You can see my code here at jsbin

How can I achieve this usi开发者_如何学Cng other way?

Thanks

---

The easiest way will be to ajax post the form. Something like this will do:

$("form").submit(function() {
  $.post(); // do the necessary post here
  return false; // Do not submit the form
});

If you aren't allowed to use Ajax, then you can pass the tab information in the url:

<div id="fragment-1">
    <p>Form 1</p>
    <form method="post" action="?tab=1">
      <input type="text" value="">
      <input type="submit" value="Save Changes" />
    </form>
</div>

Then you in page load you can select a specific tab:

$("#tabs").tabs("select", tab);

You will need to generate the tab above with server core or use something like this to retrieve it through javascript.

---

You can use a hidden field to save the value and then retain on postback.

<script type="text/javascript">
 $(document).ready(function () {
                $('#tabs').tabs({
                    select: function (event, ui) {
                        $("#<%= hfSelectedTAB.ClientID %>").val(ui.index);
                    }
                });
                $("#tabs").tabs("option", "selected", [$("#<%= hfSelectedTAB.ClientID %>").val()]);
            });
</script>

 <asp:HiddenField ID="hfSelectedTAB" runat="server"  Value="0"/>

Simple. Now your tab retains.