title: Maintaining jQuery-ui previous active tab (before reload) on page reload
body: <p>I have a jquery-ui tab component with two tabs.</p>
  
  <pre><code>&lt;div id="tabs"&gt;
    @Html.Hidden("SelectedTabId")
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#Tab-1"&gt;Tab1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#Tab-2"&gt;Tab2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="Tab-1"&gt;
    &lt;/div&gt;
    &lt;div id="Tab-2"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I am in Tab-2, I do some stuff that cause some fields (@Html.TextBoxFor) in tab-2 to be updated programmatically and automatically when some condition occurs. So after it happens (fields updated) the page is reloaded. After page is reloaded, first tab Tab-1 is being active, but I want Tab-2 to be active instead which it was the active before page was reloaded.</p>
  
  <p>I am using a hidden field, SelectedTabId (see code above), which keeps the current active tab so I am updating it with the tab index on tab active and I am activating the correct tab after page is reloading by request this value. See below code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(function () { 
              $("#tabs").tabs({ active: $('#SelectedTabId').val()});
          }
  
          $(document).ready(function () {
              var tabs = $("#tabs").tabs({
                  beforeActivate: function (event, ui) {
                      $('#SelectedTabId').val(ui.newTab.index());
                  }
              });
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>I want previous active tab to keep active after page is reloaded but it is not working so what am i doing wrong?</p>
  
  <p>I am using jQuery-ui 1.10.2</p>