asp.net mvc - Bootstrap tabs - load ajax content first THEN switch tabs -

asp.net mvc - Bootstrap tabs - load ajax content first THEN switch tabs -

i'm having troubles delaying tab alter when loading in content ajax.

if i'm positioned in tab 0 , click on tab 1, want content loaded ajax , when it's done, switch tab.

at moment tab changed instant, gives blank side till ajax content loaded.

html:

<ul class="nav nav-tabs" id="tab" role="tablist"> <li class="active"><a data-toggle="tab" id="tab1" href="#container1">information</a></li> <li><a data-toggle="tab" id="tab2" href="#container2">users</a></li> </ul> <div class="tab-content"> @*tab1*@ <div class="tab-pane active" id="container1"> @html.partial("_staticcontentfromview") </div> @*tab2*@ <div class="tab-pane" id="container2"> </div> </div>

js:

$('#tab2').click(function () { $.ajax({ url: '/home/test', type: 'get', datatype: 'html', success: function (data) { $('#container2').html(data); } }); });

update 1:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedtarget // previous tab })

this event fires before tab changed, can load content here. event called everytime tab changed. how can check tab choosen? e.target gives me url, not enough..

alright found way..

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var tabname = $(e.target).text(); //get name of tab. if (tabname == 'users') { $.ajax({ url: '/home/test', type: 'get', async: false, datatype: 'html', success: function (data) { $('#container2').html(data); e.target // activated tab e.relatedtarget // previous tab } }); } })

it's of import set async false otherwise wont work.

ajax asp.net-mvc twitter-bootstrap tabs