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 loading with bootstrap-tabs.js?

Answer 1

In Bootstrap 2.0 and up you have to bind to the 'show' event instead.

Here's an example HTML and JavaScript:

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTabs">    
        <li><a href="#home"  class="active" data-toggle="tab">Home</a></li>
        <li><a href="#foo" data-toggle="tab">Foo</a></li>
        <li><a href="#bar" data-toggle="tab">Bar</li>
    </ul>
    <div>
        <div class="tab-pane active" id="home"></div>
        <div class="tab-pane" id="foo"></div>
        <div class="tab-pane" id="bar"></div>
    </div>
</div>

JavaScript:

$(function() {
    var baseURL = 'http://yourdomain.com/ajax/';
    //load content for first tab and initialize
    $('#home').load(baseURL+'home', function() {
        $('#myTab').tab(); //initialize tabs
    });    
    $('#myTab').bind('show', function(e) {    
       var pattern=/#.+/gi //use regex to get anchor(==selector)
       var contentID = e.target.toString().match(pattern)[0]; //get anchor         
       //load content for selected tab
       $(contentID).load(baseURL+contentID.replace('#',''), function(){
            $('#myTab').tab(); //reinitialize tabs
       });
    });
});

I wrote a post about it here: http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-ajax-load-content/

Answer 2

You can listen the change event and ajax load content in the event handler

$('.tabs').bind('change', function (e) {
    var now_tab = e.target // activated tab

    // get the div's id
    var divid = $(now_tab).attr('href').substr(1);

    $.getJSON('xxx.php').success(function(data){
        $("#"+divid).text(data.msg);
    });
})

Answer 3

I wanted to load fully dynamic php pages into the tabs through Ajax. For example, I wanted to have $_GET values in the links, based on which tab it was - this is useful if your tabs are dynamic, based on database data for example. Couldn't find anything that worked with it but I did manage to write some jQuery that actually works and does what I'm looking for. I'm a complete jQuery noob but here's how I did it.

1. I created a new 'data-toggle' option called tabajax (instead of just tab), this allows me to seperate what's ajax and what's static content.
2. I created a jQuery snippet that runs based on that data-toggle, it doesn't mess with the original code.

I can now load say url.php?value=x into my Bootstrap Tabs.

Feel free to use it if you want to, code is below

jQuery code:

$('[data-toggle="tabajax"]').click(function(e) {
    e.preventDefault()
    var loadurl = $(this).attr('href')
    var targ = $(this).attr('data-target')
    $.get(loadurl, function(data) {
        $(targ).html(data)

    });
    $(this).tab('show')
});

HTML:

<li><a href="tabs/loadme.php?value=1" data-target='#val1' data-toggle="tabajax">Val 1</a></li>

So here you can see that I've changed the way bootstrap loads thing, I use the href for the dynamic ajaxlink and then add a 'data-target' value to the link instead, that should be your target div (tab-content).

So in your tab content section, you should then create an empty div called val1 for this example.

Empty Div (target):

<div class='tab-pane' id='val1'><!-- Ajax content will be loaded here--></div>

Hope this is useful to someone :)