Bootstrap Tabs with AJAX snippet - SpDNq5bVl0

http://www.bootply.com/62742

http://www.bootply.com/63891#

 

 1 $('#myTabs a').click(function (e) {
 2     e.preventDefault();
 3   
 4     var url = $(this).attr("data-url");
 5       var href = this.hash;
 6       var pane = $(this);
 7     
 8     // ajax load from data-url
 9     $(href).load(url,function(result){      
10         pane.tab('show');
11     });
12 });
13 
14 // load first tab content
15 $('#home').load($('.active a').attr("data-url"),function(result){
16   $('.active a').tab('show');
17 });

 1 <div class="container-fluid">
 2   <ul class="nav nav-tabs" id="myTabs">
 3     <li class="active"><a href="#home" data-url="/embed/62805/view">Home</a></li>
 4     <li><a href="#profile" data-url="/embed/62806/view">Profile</a></li>
 5     <li><a href="#messages" data-url="/embed/62807/view">Messages</a></li>
 6   </ul>
 7   
 8   <div class="tab-content">
 9     <div class="tab-pane active" id="home">This is the home pane...</div>
10     <div class="tab-pane" id="profile"></div>
11     <div class="tab-pane" id="messages"></div>
12   </div>
13 </div>

 

 

 1 $('#myCarousel').carousel({
 2   interval:false // remove interval for manual sliding
 3 });
 4 
 5 // when the carousel slides, load the ajax content
 6 $('#myCarousel').on('slid', function (e) {
 7   
 8     // get index of currently active item
 9     var idx = $('#myCarousel .item.active').index();
10     var url = $('.item.active').data('url');
11 
12     // ajax load from data-url
13       $('.item').html("wait...");
14     $('.item').load(url,function(result){
15         $('#myCarousel').carousel(idx);  
16     });
17   
18 });
19 
20 // load first slide
21 $('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'),function(result){    
22     $('#myCarousel').carousel(0);
23 });

<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>