CODEWITHSUNDEEP
jqueryasp.net
StevieB
StevieB

Reputation: 6541

ASP.NET Jquery set tabs dynamically

Hey I have my code as follows at the moment

<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
        break
    case 2:
        //for tab n
        $(".tab-content").hide(); //Hide all content
        $("ul.tabs li:2").addClass("active").show(); //Activate first tab
        $(".tab-content:2").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>

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

And then in code behind i.e.

    Protected Sub SupplierSearch_Click(ByVal sender As Object, ByVal e As EventArgs)
    Me._activeTabId = 2
    ' Filter by Supplier
    filterList()
End Sub

My problem is I seem to at the moment only be able define "first" "last" tab, but no idea how I can set dynamically the middle two tabs i.e. out of my 4 tabs.

I.e. I would like to be able specify 1st,2nd,3rd or fourth tab

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
        break

But it doesnt seem tor recognise anything but first and last ?

Upvotes: 2

Views: 1733

Answers (4)

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107606

Are you using $('#tabs').tabs() to set up the tabbing?

If so, you should be able to set the selected index of the tab when the page loads using:

$(document).ready(function() {
    $('#tabs').tabs({
        selected: activeTabId
    });
});

Or choose the selected tab afterwards:

$('#tabs').tabs('select', activeTabId);

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

Use eq to get the required tab. You dont even need a switch block for this

$(".tab-content").hide(); //Hide all content
$("ul.tabs li").eq(activeTabId-1).addClass("active").show(); //Activate tab
$(".tab-content").eq(activeTabId-1).show(); //Show tab content

Upvotes: 1

Tejs
Tejs

Reputation: 41256

You seem to be going about this the wrong way; if you want to dynamically select a tab, you simply call the appropriate method:

 $('#myTabControl').tabs('select', 1);

You select the 0-based tab dynamically this way, and then all the appropriate events are fired.

Upvotes: 1

Grant Thomas
Grant Thomas

Reputation: 45068

Try eq(index) - this is a zero-based index selector.

That is to say, something like this:

$("ul.tabs li:eq(1)")

$("ul.tabs li:eq(2)")

Upvotes: 1

Related Questions