bootstrap tab('show') not work on dynimcally loaded 'tab-content'

Question

I am using ASP.NET MVC and boostrap 3

I am using bootstrap tabs, my main view like this

  <div class="row">
      <div class="tabs-container">
          <ul class="nav nav-tabs" id="test">
              <li class="active"><a data-toggle="tab" href="#tab-operations">Operations</a></li>
              <li class=""><a data-toggle="tab" href="#tab-categories">Categories</a></li>
          </ul>
          @Html.Partial("_Ordering", Model)
      </div>
  </div>

the partial view _Ordering like this

<div class="tab-content" id="ordDiv">
    <div id="tab-operations" class="tab-pane active">
        // some content not important
    </div>
    <div id="tab-categories" class="tab-pane">
        // some content not important
    </div>
</div>

and I am using unobtrusive-ajax to update the partial view

@Ajax.ActionLink("cancel", "PartialOrdering", null,
    new AjaxOptions { HttpMethod = "GET", Url = Url.Action("PartialOrdering"), UpdateTargetId = "ordDiv", InsertionMode = InsertionMode.Replace }, null)

the content of the tab updating correctly wihout any problem.

the problem is i want to show the tab which already was exists before the ajax request refreshed the content. I used js code for this like this

var a = $('#test li.active').find('a');
a.click();      // not showing the content of the tab
a.tab('show');  // also this not showing the content of the tab

the previous code does not make any error in the console, but the desired tab is not shown

Answer 1

If you want to show a specific tab here you will need to pass the id of specific anchor tag and based on that anchor you can call the tab() function.

$(document).ready(function(){
  activeaTab('tab-categories');
});
function activeaTab(tab){
  $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

https://jsfiddle.net/ewaeLkvv/