ajax - bootstrap tab('show') not work on dynimcally loaded 'tab-content' -
i using asp.net mvc , boostrap 3
i using bootstrap tabs, main view 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
this
<div class="tab-content" id="orddiv"> <div id="tab-operations" class="tab-pane active"> // content not important </div> <div id="tab-categories" class="tab-pane"> // content not important </div> </div>
and using unobtrusive-ajax update partial view
@ajax.actionlink("cancel", "partialordering", null, new ajaxoptions { httpmethod = "get", url = url.action("partialordering"), updatetargetid = "orddiv", insertionmode = insertionmode.replace }, null)
the content of tab updating correctly wihout problem.
the problem want show tab exists before ajax request refreshed content. used js code this
var = $('#test li.active').find('a'); a.click(); // not showing content of tab a.tab('show'); // not showing content of tab
the previous code not make error in console, desired tab not shown
if want show specific tab here need pass id of specific anchor tag , based on anchor can call tab()
function.
$(document).ready(function(){ activeatab('tab-categories'); }); function activeatab(tab){ $('.nav-tabs a[href="#' + tab + '"]').tab('show'); };
Comments
Post a Comment