Bootstrap Tabs with AJAX snippet - SpDNq5bVl0

$('#myTabs a').click(function (e) {
e.preventDefault();

var url = $(this).attr("data-url");
var href = this.hash;
var pane = $(this);

// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
});

// load first tab content
$('#home').load($('.active a').attr("data-url"),function(result){
$('.active a').tab('show');
});

<div class="container-fluid">
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a href="#home" data-url="/embed/62805/view">Home</a></li>
<li><a href="#profile" data-url="/embed/62806/view">Profile</a></li>
<li><a href="#messages" data-url="/embed/62807/view">Messages</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home">This is the home pane...</div>
<div class="tab-pane" id="profile"></div>
<div class="tab-pane" id="messages"></div>
</div>
</div>

$('#myCarousel').carousel({
interval:false // remove interval for manual sliding
});

// when the carousel slides, load the ajax content
$('#myCarousel').on('slid', function (e) {

// get index of currently active item
var idx = $('#myCarousel .item.active').index();
var url = $('.item.active').data('url');

// ajax load from data-url
$('.item').html("wait...");
$('.item').load(url,function(result){
$('#myCarousel').carousel(idx);
});

});

// load first slide
$('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'),function(result){
$('#myCarousel').carousel(0);
});

<div class="container">

<h2>Bootstrap Carousel AJAX Content</h2>
<div class="span5">

<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<div class="active item" data-url="/render/62805" data-slide-number="0">

</div>
<div class="item" data-url="/render/62806">

</div>
<div class="item" data-url="/render/62807">

</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>

</div>