How to convert an existing HTML/JQuery to ASP.net/JQuery code

Question

I have the following HTML page which displays some tabs along with contents and changes the content visiblity based on the tab clicked by the user:

HTML:

<ul id="tabs">
    <li><a href="#" title="tab1">One</a></li>
    <li><a href="#" title="tab2">Two</a></li>
    <li><a href="#" title="tab3">Three</a></li>
    <li><a href="#" title="tab4">Four</a></li>    
</ul>

<div id="content"> 
    <div id="tab1">THIS IS TAB 1</div>
    <div id="tab2">THIS IS TAB 2</div>
    <div id="tab3">THIS IS TAB 3</div>
    <div id="tab4">THIS IS TAB 4</div>
</div>

JQuery that hides and shows the the content:

<script> 
$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();        
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
})();
</script>

Instead of UL/LI and DIV, I ended up using <asp:BulletedList> for UL/LI and <asp:Panel> for DIV because I will have to show and hide the tab from code behind.

So I created the following using ASP.net controls:

<asp:BulletedList ID="tabs" ClientIDMode="Static" runat="server" DisplayMode="HyperLink">
    <asp:ListItem Text="Status" Value="#"></asp:ListItem>
    <asp:ListItem Text="Your Tasks" Value="#"></asp:ListItem>
    <asp:ListItem Text="Messages" Value="#"></asp:ListItem>
    <asp:ListItem Text="Dependencies" Value="#"></asp:ListItem>
    <asp:ListItem Text="Documents" Value="#"></asp:ListItem>
    <asp:ListItem Text="Pro-Forma" Value="#"></asp:ListItem>
    <asp:ListItem Text="Admin Controls" Value="#"></asp:ListItem>
</asp:BulletedList>

<asp:Panel ID="content" runat="server" ClientIDMode="Static">
    <asp:Panel ID="tab1" ClientIDMode="Static" runat="server">THIS IS A TEST #1</asp:Panel>
    <asp:Panel ID="tab2" ClientIDMode="Static" runat="server">THIS IS A TEST #2</asp:Panel>
    <asp:Panel ID="tab3" ClientIDMode="Static" runat="server">THIS IS A TEST #3</asp:Panel>
    <asp:Panel ID="tab4" ClientIDMode="Static" runat="server">THIS IS A TEST #4</asp:Panel>
    <asp:Panel ID="tab5" ClientIDMode="Static" runat="server">THIS IS A TEST #5</asp:Panel>
    <asp:Panel ID="tab6" ClientIDMode="Static" runat="server">THIS IS A TEST #6</asp:Panel>
    <asp:Panel ID="tab7" ClientIDMode="Static" runat="server">THIS IS A TEST #7</asp:Panel>
</asp:Panel>

and kept the same JQuery as posted before. When I load the ASP.net page for the first time, Status tab is highlighted and tab1 from the content panel is displayed. When I click on any of the tab the content panel just doesn't show anything, it's blank.

I realized, it's because the JQuery is using the title tag from the link inside each LI, but unfortunately I can't use HyperLink inside the <asp:ListItem> because VS complains saying it's not a standard. How can I modify my code so I am able to use the ASP.net controls and have the JQuery working correctly?

Chrome shows this:

enter image description here

Mark S · Accepted Answer · 2014-07-17 17:55:21Z

1

Replace your HTML in the beginning with this, putting the tab target in the href:

<asp:BulletedList ID="tabs" ClientIDMode="Static" runat="server" DisplayMode="HyperLink">
    <asp:ListItem Text="Status" Value="#tab1"></asp:ListItem>
    <asp:ListItem Text="Your Tasks" Value="#tab2"></asp:ListItem>
    <asp:ListItem Text="Messages" Value="#tab3"></asp:ListItem>
    <asp:ListItem Text="Dependencies" Value="#tab4"></asp:ListItem>
    <asp:ListItem Text="Documents" Value="#tab5"></asp:ListItem>
    <asp:ListItem Text="Pro-Forma" Value="#tab6"></asp:ListItem>
    <asp:ListItem Text="Admin Controls" Value="#tab7"></asp:ListItem>
</asp:BulletedList>

Then change the last line in your jQuery from:

$('#' + $(this).attr('title')).fadeIn(); // Show content for current tab

To:

$($(this).attr('href')).fadeIn();

Revise your script block to chain animations on the fadeIn for the active tab as well, like so:

// Initially hide all content
$("#content div").css('display', 'none');

// Then activate the first tab
$("#tabs li:first").attr("id", "current");

// Now fade it in
$("#content div:first").fadeIn();

// Click event 
$('#tabs a').click(function (e) {

    // Get a handle to the current object when we move into the scope 
    // of the hide callback
    var what = $(this);

    e.preventDefault();

    // Hide all content
    $("#content div:visible").hide(
        0,
        function () {
            $("#tabs li").attr("id", ""); //Reset id's
            what.parent().attr("id", "current"); // Activate this
            $(what.attr('href')).fadeIn();
        }
    ); 

    // Return false to ensure navigation doesn't fire
    return false;
});

edited Jul 17, 2014 at 17:55

answered Jul 17, 2014 at 17:28

Mark S

4014 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

SearchForKnowledge Over a year ago

Thanks!!! :) Works great in IE from VS but when I copy the URL of the site into Chrome all the contents div are being shown... I will update my question with the screenshot.

Mark S Over a year ago

Well I don't care much for I.E. so I'd rather have a Mozilla / webKit friendly solution. I tested this in Firefox, I'll check it out in Chrome.

Mark S Over a year ago

I'm not doubting you, but it worked for me in Windows Chrome 35 the same as it did in Firefox 30.

SearchForKnowledge Over a year ago

Have you looked at the screenshot? Chome is not showing correctly... I don't care about IE either ;) but unfortunately the end-user will be using IE primarily.

SearchForKnowledge Over a year ago

The current tab isn't highlighted and all the DIV shows up when page loads in Chrome and FF :/

|

Mark · Accepted Answer · 2014-07-17 17:04:57Z

0

Found this answer here: http://channel9.msdn.com/Forums/TechOff/257894-aspnet-BulletedList-list-item-with-HTML-

Try using a Repeater. The BulletedList unfortunately doesn't support HTML for its ListItems.

Markup

<asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate><li><span class="label">Test</span> <%# Container.DataItem %></li></ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

answered Jul 17, 2014 at 17:04

Mark

4,8718 gold badges58 silver badges93 bronze badges

1 Comment

SearchForKnowledge Over a year ago

Actually it is rendering as HTML UL/LI but I want the <a> inside to have the Title.

Collectives™ on Stack Overflow

How to convert an existing HTML/JQuery to ASP.net/JQuery code

2 Answers 2

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related