Question

I have the following Jquery which has 4 tabs which have 4 different searches

i.e.

1) Product Name Search
2) Supplier Search
etc

This is the Jquery

<script type="text/javascript">

$(document).ready(function() {

    //Default Action
    $(".tab-content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab-content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab-content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
});
</script>

And here is the tabs

        <ul class="tabs">
        <li><a href="#tab1">By Product Name</a></li>
        <li><a href="#tab2">By Supplier</a></li>
        <li><a href="#tab3">By EAN Code</a></li>
        <li><a href="#tab4">By IPU Code</a></li>
    </ul>
    <div id="tab1" class="tab-content">
        <asp:textbox id="searchProductName" runat="server"></asp:textBox> <asp:Button ID="btnProductSearch" runat="server" Text="Search Product Name"  CssClass="search" OnClick="ProductSearch_Click"  UseSubmitBehavior="true" CausesValidation="false" />
    </div>

    <div id="tab2" class="tab-content">
        <asp:textbox id="searchSupplierName" runat="server"></asp:textBox> <asp:Button ID="btnSupplierSearch" runat="server" Text="Search Supplier Name"  CssClass="search" OnClick="SupplierSearch_Click" />
    </div>

    <div id="tab3" class="tab-content">
       <asp:textbox id="searchEANCode" runat="server"></asp:textBox> <asp:Button ID="btnEANSearch" runat="server" Text="Search EAN Code"  CssClass="search" OnClick="EANSearch_Click" />
    </div>

    <div id="tab4" class="tab-content">
       <asp:textbox id="searchIPUCode" runat="server"></asp:textBox> <asp:Button ID="btnIPUSearch" runat="server" Text="Search IPU Code"  CssClass="search" OnClick="IPUSearch_Click" />
    </div>

Now the problem is everytime I perform a search i.e. in the second tab Supplier the page refreshes and the tabs gets reset to first tab.

In my onclick method, is there anyway I get set the tabs to display the second one when the page refreshes.

i.e.

    Protected Sub SupplierSearch_Click(ByVal sender As Object, ByVal e As EventArgs)
    ' Filter by Supplier
    If searchSupplierName.Text.Length > 0 Then
        srcProductListPerCustomer.FilterExpression = " (supplier_name like '%" + searchSupplierName.Text.ToString & "%')"
        productListTable.DataBind()
    End If
End Sub

Answer 1

What you can do is, add a public property to your page class say ActiveTabId, this property will contains the id of tab to set active, by default you can set it to say 1 i.e. show first tab on start… And when postback occurs from say Supplier tab set it to 2 and in your aspx page, within javascript code block call the .addClass() and .show() methods of appropriate tab…..

In your code behind:

Private _activeTabId As String

    Public Property ActiveTabId() As String
        Get
            Return _activeTabId
        End Get
        Set(ByVal value As String)
            _activeTabId = value
        End Set
    End Property

    Protected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load
        Me._activeTabId = 1
    End Sub

Protected Sub SupplierSearch_Click(ByVal sender As Object, ByVal e As EventArgs)
        'set tab id
        Me._activeTabId = 2

        ' Filter by Supplier
        If searchSupplierName.Text.Length > 0 Then
            srcProductListPerCustomer.FilterExpression = " (supplier_name like '%" + searchSupplierName.Text.ToString & "%')"
            productListTable.DataBind()
        End If
    End Sub

and in your aspx page, within javascript code blocks:

<script type="text/javascript">
        var activeTabId = '<%=ActiveTabId %>';
        $(document).ready(function() {      
            switch(activeTabId) {
                case 1:
                    //for tab 1
                    $(".tab-content").hide(); //Hide all content
                    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
                    $(".tab-content:first").show(); //Show first tab content

                case n:
                    //for tab n
                    $(".tab-content").hide(); //Hide all content
                    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
                    $(".tab-content:first").show(); //Show first tab content
            }

            //On Click Event
            $("ul.tabs li").click(function() {
                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab-content").hide(); //Hide all tab content
                var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active content
                return false;
            });
        });
    </script>

Between javascript code can be optimized but my version is just for the purpose of guideline…