ASP.NET Looking to dynamically control Jquery multi tab search

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开发者_JAVA技巧.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

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...

You could try adding a hash to the end of your url like http://www.myurl.com/page.aspx#tab2. Then in the document.ready function you can select the tab that they clicked on. You may want to look into this example of using the jQuery BBQ plugin. (I've used that plugin before on other projects and it has worked great.)