Question

I am using Bootstrap and have Tabs that are created dynamically. Although they are dynamic, I will only create 3 Tabs. They are: Draft, Published and Archived. These are actually Enums.

When I click on a tab, I want to change a hidden field to the same value of the tab so that when Postback occurs, I wish to open the selected that was previously opened.

The tabs id is #i where i is the iterator within the for loop. So the Tabs will be: #0, #1 and #2.

Does anyone know how I can create one onclick event for all the tabs and make the hidden field’s value change to that of the Tabs id.

This is the the code:

<div class="tab-content">
    @for (int i = 0; i < Model.WorkflowStatuses.Count; i++)
    {
        <div class="tab-pane @(i == 0 ? "active" : string.Empty)" id="@i">

EDIT
This is what I have so far – The hidden field’s value isn’t changing however:

<script>
$('#listingTab a[data-toggle="tab"]').on('show', function (e) {
    $('#selectedTab').val($(e.target).prop('id'));
})

@Html.HiddenFor(m=>Model.SelectedTab)

@if (Model.AnyListings)
{
<ul class="nav nav-tabs" id="listingTab">
    @for (int i = 0; i < Model.WorkflowStatuses.Count; i++)

EDIT
I have added the letterl “t” but the hidden value still doesn’t change:

<script>
    $('#tab-content a[data-toggle="tab"]').on('show', function (e) {
        $('#SelectedTab').val($(e.target).prop('id'));
    })
</script>

@Html.HiddenFor(m=>Model.SelectedTab)

@if (Model.AnyListings)
{
    <ul class="nav nav-tabs" id="listingTab">
        @for (int i = 0; i < Model.WorkflowStatuses.Count; i++)
        {
            <li class="@(i == 0 ? "active" : string.Empty)"><a href="@string.Format("#t{0}", i)" data-toggle="tab">@Model.WorkflowStatuses[i].ToString()</a></li>
        }

Answer 1

Try using the show event which fires whenever the active tab is changed:

$('#yourTabControl a[data-toggle="tab"]').on('show', function (e) {
  $('#hiddenField').val($(e.target).prop('id'));
})

[EDIT]:

After a chat we concluded the e.target is the link you clicked on, not the tab it activated. So to keep the code a bit easier I suggested to use a data-tabid attribute on the link:

<li class="@(i == 0 ? "active" : string.Empty)">
  <a href="@string.Format("#t{0}", i)" data-toggle="tab" 
     data-tabid="@i">@Model.WorkflowStatuses[i].ToString()</a></li>

And use that in the event handler:

$('#yourTabControl a[data-toggle="tab"]').on('show', function (e) {
  $('#hiddenField').val($(e.target).data('tabid'));
})