CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
hollyquinn
hollyquinn

Reputation: 652

Bootstrap nav-tabs check for selected tab using jquery

I have the following Bootstrap nav tabs:

 <div class="row spiff_tabs_body">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs spiff_tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">Instant Spiff</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
                <div role="tabpanel" class="tab-pane" id="instantspiff"></div>
            </div>
        </div>
    </div>
</div>

I need to be able to check which tab is selected and then display an alert. I have the following javascript in my view:

<script>
$(function () {
    FormGet('dashboard/delayedspiff', 'delayedspiff');        
});
</script>

<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // here is the new selected tab id
    var selectedTabId = e.target.id;
    var id = $('.tab-content .active').attr('id');
    if (id == "delayedspiff") {
        alert("delayedspiff");
    } else {
        alert("instantspiff");
    }
});   
</script>

When I click the tabs it works, but the alert always displays delayedspiff. I need to dislay instantspiff when they click on the instantspiff tab. Can anyone see what I'm doing wrong?

Upvotes: 0

Views: 4293

Answers (1)

DinoMyte
DinoMyte

Reputation: 8868

You just need to remove class active from all tabs and add it to the tab which was clicked.

EDIT: In order to get the id of clicked tab, try using an attribute data-id on the tab selections.

  <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-id="delayedspiff" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" data-id="instantspiff" role="tab" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">Instant Spiff</a>
                </li>

<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var wrongid = $('.tab-content .active').attr('id');
    $('a[data-toggle="tab"]').removeClass("active"); // remove class active from all tabs
    $(this).addClass("active"); // add class active to the current tab
    var correctid = $(this).data("id"); // get the attribute data-id of the clicked tab
    alert($('.tab-content .active')[0].outerHTML); // shows why you are getting the incorrect id
    if (correctid == "delayedspiff") 
      alert("delayedspiff");
    else 
      alert("instantspiff");    
});   
</script>

Updated fiddle : https://jsfiddle.net/DTcHh/14313/

Upvotes: 1

Related Questions