Twitter-Bootstrap tabs load container content via AJAX

Question

I'm trying to implement this example for Twitter-Bootstrap tabs http://www.dba-resources.com/scripting-programming/ajax-tabs-in-bootstrap-2-1/ loading content via AJAX, but I need to load the content from a div container within the same document, rather than loading multiple documents. The code I'm using is as follows:

jQuery

$(function() {
    $("#MainTabs").tab();
    $("#MainTabs").bind("show", function(e) {    
        var contentID  = $(e.target).attr("data-target");
        var contentURL = $(e.target).attr("href");
        if (typeof(contentURL) != 'undefined')
            $(contentID).load(contentURL, function(){ $("#MainTabs").tab(); });
        else
            $(contentID).tab('show');
        });
    $('#MainTabs div[data-target="#tabone"]').tab("show");
});

HTML

<ul id="MainTabs" class="nav nav-tabs">
    <li><div data-target="#tabone" data-toggle="tab">tab One</div></li>
    <li><div data-target="#tabtwo" data-toggle="tab" href="/test.html">Tab Two</div></li>
    <li><div data-target="#tabthree" data-toggle="tab" href="/test2.html">Tab Three</div></li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="tabone">Content Tab One</div>
    <div class="tab-pane" id="tabtwo">Loading...</div>
    <div class="tab-pane" id="tabthree">Loading...</div>
</div>

Thank you in advance for any help.

Dennis Rongo · Accepted Answer · 2013-02-06 07:37:41Z

7

That should be the default behavior if you just pass in the id of the container to the href.

<li><div data-target="#tabone" data-toggle="tab" href="#loadedcontent">tab One</div></li>

....

<div id="loadedcontent">My content</div>

Since you have a special case where you want to load a specific container of the page through an AJAX call. You can do something like this.

HTML

<li><div id="specialTab" data-target="#tabone" data-toggle="tab" href="/ajax.html">tab one</div></li>

JS

$('#specialTab').click(function(e) {
    e.preventDefault();
    var containerId = '#content'; /** Specify which element container */
    var self = $(this);
    var url = self.attr('href');
    $(self.data('target'))
        .load(url +' '+ containerId, function(){
           self.tab('show');
        });
});

edited Feb 6, 2013 at 7:37

answered Feb 6, 2013 at 1:59

Dennis Rongo

4,6111 gold badge28 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dano_D Over a year ago

Thanks Denise. The need is to load a specific container (div) from an external file. The default behavior is not what I need.

Dano_D Over a year ago

Thanks again. So in this case what would be the code for tabtwo to load yet a different container inside /ajax.html? Say #contenttwo. Each tab would load a different container from the same external html

Dennis Rongo Over a year ago

In that case, you can make the <div class="specialTab" data-container="#container" data-toggle="tab" href="/ajax.html"></div> and the data-container would specify the element you want to capture. You would then replace the var containerId=self.data('container'); to get the container element.

Collectives™ on Stack Overflow

Twitter-Bootstrap tabs load container content via AJAX

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related