How to use AJAX loading with Bootstrap tabs?

Question

I used bootstrap-tabs.js and it has worked perfectly.

But I didn\'t find information about how to load content through AJAX request.

So, how to use AJAX load

Answer 1

Here is a solution I have found - and modified to suit my needs:

$("#tabletabs").tab(); // initialize tabs
$("#tabletabs").bind("show", function(e) { 
var contentID = $(e.target).attr("data-target");
var contentURL = $(e.target).attr("href");
if (typeof(contentURL) != 'undefined') { // Check if URL exists
$(contentID).load(contentURL, function(){
$("#tabletabs").tab(); // reinitialize tabs
});
} else {
$(contentID).tab('show');
}
});
$('#tabletabs a:first').tab("show"); // Load and display content for first tab
});