Click here to Skip to main content
Click here to Skip to main content

jQuery Active Tab After Page Postback (jQuery 1.9.1 or Above)

, 8 Jul 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
After postback, the same tab will be active.

Introduction

jQuery Tabs is easy to use, but one problem with ASP.NET is that when the page gets posted back, the active tab is deactivated and by default, the first tab gets activated. This tip fixes this problem i.e., after postback, the same tab will be active.

This tip solves the deactivation of the active tab of jQuery tab plugin after postback in ASP.NET.

Using the Code

Create a new website in Visual Studio and add a page default.aspx.

Add the following code to default.aspx:

<head>
    <title></title>
    <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
    <link href="css/custom-theme/jquery-ui-1.10.1.custom.min.css" 
          rel="stylesheet" type="text/css" />
    <script src="js/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            $('#tabs').tabs({
                activate: function () {
                    var newIdx = $('#tabs').tabs('option', 'active');
                    $('#<%=hidLastTab.ClientID%>').val(newIdx);

                }, heightStyle: "auto",
                active: previouslySelectedTab,
                show: { effect: "fadeIn", duration: 1000 }
            });

        });
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div style="width:900px; margin:0 auto">
    <div id="tabs" style="margin:0 auto;  margin-bottom:2px;">
	<ul>
		<li><a href="#tabs-1">STATE TRACKING</a></li>
		<li><a href="#tabs-2">ICONS</a></li>
		<li><a href="#tabs-3">Effects</a></li>

	</ul>
    <div id="tabs-1">
    <strong>STATE TRACKING</strong>
        <p>
At any point in time, various parts of widget or interaction elements may be in various
states. jQuery UI tracks these states, and applies appropriate visual styling to them, via
a set of classes that begin with ui-state. These states include ui-state-default, uistate-
active, ui-state-focus, ui-state-highlight, ui-state-error, ui-statedisabled,
and ui-state-hover.
We can use these names in our own scripts or CSS to track state or affect the styling
of elements in the various states.</p>
    </div>
     <div id="tabs-2">
     <strong>ICONS</strong><p>
jQuery UI defines a large number of icons that can be used by various widgets. For
example, icon indicators on the tab elements of the Tab widget, or icons directly on
Button widgets. Each icon is identified by a class name beginning with ui-icon; for
example, ui-icon-person, ui-icon-print, and ui-icon-arrowthick-1-sw.</p><p>
jQuery UI is very clever regarding how it handles icons. All the individual icon
images are defined in a grid on a single image—an icon sheet, if you will. That way,
once this image has been downloaded and cached by the browser, no further trips to
the server are needed to display any of the available icons—and there are a lot of
them (173 as this is being written). The icon class definitions merely identify how to
move the origin of this sheet image as a background image, causing the desired icon
to appear as the background of an element.</p>
    </div>
      <div id="tabs-3">
    <strong> The jQuery UI effects</strong><p>
All of the effects that jQuery UI provides can be used on their own—without other
methods—via the effect() method. This method launches the effect on the elements
of the wrapped set.</p>
    </div>

  </div>
  <asp:Button ID="btnSubmit" runat="server" Text="submit" />
    <asp:HiddenField ID="hidLastTab" Value="0" runat="server" />
    </div>

    </form>
</body>

This code is to be added in default.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
    String hiddenFieldValue = hidLastTab.Value;
    StringBuilder js = new StringBuilder();
    js.Append("<script type='text/javascript'>");
    js.Append("var previouslySelectedTab = ");
    js.Append(hiddenFieldValue);
    js.Append(";</script>");
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "acttab", js.ToString());
    //this.Header.Controls.Add(new LiteralControl(js.ToString()));
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Zafar Safi
Software Developer (Senior)
Afghanistan Afghanistan
i am working in asp.net since 2007. My favorite is c#.
Email: zafar.safi83@gmail.com
skype: zafarali5

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1411023.1 | Last Updated 8 Jul 2013
Article Copyright 2013 by Zafar Safi
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid