Wednesday, January 25, 2012

Jquery tabs postback problem and solution

I am using jquery library in my project and I use jquery-ui tabs.
When a postback occurs in any tab, tabs reloaded and goes to first tab.

<script type="text/javascript">
    $(document).ready(function() {
        $("#example").tabs();
    });
</script>

Solution is to store last tab in an hidden field and reload each time page loads.

<script language="javascript" type="text/javascript">
    $(function() {
        $("#example").tabs({
            show: function() {
                var sel = $('#example').tabs('select', $("#<%= hidLastTab.ClientID %>").val(sel));

            },
            selected: <%= hidLastTab.Value %>
         });
      });
</script>
<asp:hiddenfield id="hidLastTab" runat="server" value="0"></asp:hiddenfield>

or alternatively with a funcion:

private void SelectTab(int tabNumber) {
            var script = string.Format(@"$(document).ready( function(){{ $('.tabs').tabs( 'select', {0} ); }});", --tabNumber);
            ScriptHelper.RegisterHeadScriptBlock(typeof(System.Web.UI.Page), "TabSelector", script, true);

        }


Submit this story to DotNetKicks