ASP.NET LinkButton not firing inside of Bootstrap Tabs

Question

Using Bootstrap's Tabs, ASP.NET LinkButtons are not firing events while inside of the tab-content div.

HTML

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active" runat="server" id="liQuestions" href="#questions" role="tab" data-toggle="tab">
        <asp:Button runat="server" ID="btnQuestions" />
    </li>
    <li role="presentation" class="active" runat="server" id="liComments" href="#comments" role="tab" data-toggle="tab">
        <asp:Button runat="server" ID="btnComments" />
    </li>
    <li role="presentation" class="active" runat="server" id="liAttachments" href="#attachments" role="tab" data-toggle="tab">
        <asp:Button runat="server" ID="btnAttachments" />
    </li>
    <li role="presentation" class="active" runat="server" id="liTracking" href="#tracking" role="tab" data-toggle="tab">
        <asp:Button runat="server" ID="btnTracking" />
    </li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="questions">
        <asp:LinkButton runat="server" ID="lbQuestions" CausesValidation="false"></asp:LinkButton>
    </div>
    <div role="tabpanel" class="tab-pane" id="comments">
        <asp:LinkButton runat="server" ID="lbComments" OnClick="lbComments_Click"></asp:LinkButton>
    </div>
    <div role="tabpanel" class="tab-pane" id="attachments">
    </div>
    <div role="tabpanel" class="tab-pane" id="tracking">
    </div>
</div>

C#

    protected void Page_Load(object sender, EventArgs e)
    {
        lbQuestions.Click += lbComments_Click
    }
    ...
    protected void lbComments_Click(object sender, EventArgs e)
    {
        Console.Write("This breakpoint never gets hit");
    }

Neither methods of adding the OnClick event are firing while the LinkButtons are inside of the <div class="tab-content"> div. Oddly, asp Buttons work perfectly. However I'm unable to use the Glyphicons inside of the Buttons, or just Glyphicons as buttons themselves if I have to settle for that. -- I also need the ability to use CommandArgument/CommandName, so a simple HTML button will not suite my needs either.

score 0 · Accepted Answer · answered Jan 06 '16 at 21:36

0

The problem is likely the JS that initializes the tabs plugin. Look at that preventDefault there:

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Consider putting a class on the buttons that you want to behave as tabs and modify your JS to the following:

$('#myTabs a.myTabbedButton').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

answered Jan 06 '16 at 21:36

khalid13

2,767
2
30
48

1

This didn't end up being the specific problem I was having, although this answer got me looking in the right direction. -- It ended up being that I had some runat="server" 's on the
's. -- Also, I see a bunch of stuff I rewrote incorrectly when I was hastily getting this question up, I appreciate you not attacking my demonstration code's syntax and actually addressing something that could have been the real issue! (I put the tab stuff on the
's on accident instead of the buttons and forget a semi-colon)

aboas

Jan 07 '16 at 12:48

score 0 · Answer 2 · answered Jan 07 '16 at 03:54

The actual problem is in code itself..

Parser Error Message: The tag contains duplicate 'role' attributes.

Could you please check the code.

<li role="presentation" class="active" runat="server" id="liQuestions" href="#questions" role="tab" data-toggle="tab">
  <asp:Button runat="server" ID="btnQuestions" />
</li>

2 role is added (role="presentation" and role="tab").

Also don't forget to add ";" after lbQuestions.Click += lbComments_Click

It works fine for me.Hope you got the issue.

ASP.NET LinkButton not firing inside of Bootstrap Tabs

2 Answers2