using twitter bootstrap with tabbed - ajax content

Question

so i understand bootstrap doesnt have default support for ajax called content for tabs, as jQuery UI does.

i have managed with the helps of other questions here, to come up with the following solution, that kind of works:

    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1"> tab 1</a></li>
        <li><a data-toggle="tab" href="#tab2">tab 2</a></li>
        <li><a data-toggle="tab" href="#tab3">tab 3</a></li>
        <li><a data-toggle="tab" class="ajax" href="test.html">tab 4 - ajax</a></li>
      </ul>
      <div class="tab-content">
        <div id="tab1" class="tab-pane active"> tab 1 content </div>
        <div id="tab2" class="tab-pane"> tab 2 content </div>
        <div id="tab3" class="tab-pane"> tab 3 content </div>
      </div>
    </div>

JS:

<script type="text/javascript">
        $(function() {

            $('.ajax').click(function (e) {
              var thisTab = e.target // activated tab
              var pageTarget = $(thisTab).attr('href');
              //get number of li in list of tabs:
              var itemNumber = $(this).parent().index()+1;
              $("#tab"+itemNumber).load(pageTarget);

            });
        });
    </script>

this seems to work perfectly - it finds the destination href of the anchor, and it works out the order of the

.

i have 2 questions:

1) i want to work out programatically is tab #tab4 exists, and if so - then insert the content via ajax. i am using: if ($("#tab"+itemNumber).length > 0)

but this seems to give the opposite result - ie, if it is there, it tells me its not. whats up with that? - weird!

and 2) if i have i do have #tab4 (lets say i have put it in statically for now), then the content from test.html is loaded in successfully (yay) - but my issue is that now i cant get the tabs to switch to make #tab4 the active one. I have tried applying the "active" class, and have also tried reapplying the tab() call, but that also doesnt work.

any ideas?

thanks in advance!

EDIT: here is a jsfiddle to play with: http://jsfiddle.net/kneidels/wnHEF/1/

merv · Accepted Answer · 2012-08-22 14:36:27Z

5

Removing the 'active' class, and then applying it to the specific tab-pane seems to work.

$('.tab-pane').removeClass('active');
$('#tab' + itemNumber).addClass('active');

JSFiddle

Using load() in your JSFiddle example also works as expected in my example.

JSFiddle

Regarding dynamically creating the pane, your conditional test works for me, although it could be simplified:

if (!$('#tab' + itemNumber).length) { /* create new tab */ }

A simple test seemed to work fine:

for (var i = 0; i < 6; i++) {
  console.log("#tab" + i + " found: " + !!$('#tab' + i).length);
}

// #tab0 found: false
// #tab1 found: true
// #tab2 found: true
// #tab3 found: true
// #tab4 found: true
// #tab5 found: false

JSFiddle

edited Aug 22, 2012 at 14:36

answered Aug 22, 2012 at 6:17

merv

78.2k17 gold badges218 silver badges290 bronze badges

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

3 Comments

kneidels Over a year ago

Thanks for this! but i tried changing the html() in the test, to load() and it doesnt seem to work anymore. also, any comment about adding the div is dynamically if it doesnt exist?

merv Over a year ago

@kneidels I've updated my answer. I suspect that your ajax call is violating the same origin policy. Did you check the console for errors?

kneidels Over a year ago

Thanks merv, i appreciate the time on this. the console shows that the load() is working. then i found the issue. i had the "fade" class set on the tab, which is supposed to fade it in out, but for some reason it didnt. when i remove that - it showed up properly. Thanks a mil!

Khanh Truong · Accepted Answer · 2014-07-31 02:07:33Z

This is my solution for Bootstrap 3 Tab and asynchronous tab load. Hope that it will help you. Firstly, the markup for Bootstrap 3 Tab as normal. Note that the tab-content will have to store the ajax link to call if tab's content is empty. I used data-href to store it, you can change the attribute if you want.

<ul id="tabs" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#basic" role="tab" data-toggle="tab">Basic</a></li>
    <li><a href="#description" role="tab" data-toggle="tab">Description</a></li>
    <li><a href="#imdb" role="tab" data-toggle="tab">IMDb</a></li>
    <li><a href="#subtitles" role="tab" data-toggle="tab">Subtitles</a></li>
    <li><a href="#files" role="tab" data-toggle="tab">Files</a></li>
    <li><a href="#peers" role="tab" data-toggle="tab">Peers</a></li>
    <li><a href="#tasks" role="tab" data-toggle="tab">Tasks</a></li></ul>

<div class="tab-content">
    <div class="tab-pane active fade in clearfix" id="basic">Basic content</div>
    <div class="tab-pane fade in" id="description">Description content</div>
    <div class="tab-pane fade in" id="imdb">IMDb</div>
    <div class="tab-pane fade in" id="subtitles" data-href="subtitles.html"></div>
    <div class="tab-pane fade in" id="files" data-href="files.html"></div>
    <div class="tab-pane fade in" id="peers" data-href="peers.html"></div>
    <div class="tab-pane fade in" id="tasks" data-href="tasks.html"></div></div>

And the jquery part to trigger the event tab change, check whether the content is empty or not. If it's empty, call the ajax function request the page which is stored in data-href to replace it.

<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
    var id = e.target.hash;
    if($(id).html()==="") {
        ajax_call($(id).attr('data-href'),"GET",null,function(data){
            $(id).html(data);
        });
    }
});
var hash = window.location.hash;
hash && $('#tabs a[href="' + hash + '"]').tab('show');
function ajax_call(url, type, data, callback) {
    $.ajax({
        url: url,
        type: type,
        async: false,
        data: data,
        success: function(data){
            callback(data);
        }
    });
}
</script>

Pjl · Accepted Answer · 2014-01-30 19:57:37Z

This may help you man, i use this on bootstrap 3. I guess should work for version 2 too

Define you markut

<ul class="nav nav-tabs" id="myTab">
  <li class="active blo_tabs"><a href="#blo_bor" data-toggle="tab"
          data-url="{% url "generar_bloque" %}"
          data-pars="listar=true&borrador&true"
          data-target="#blo_bor"
          >BORRADORES</a></li>
  <li><a class="blo_tabs" href="#blo_def" data-toggle="tab"
         data-url="{% url "generar_bloque" %}"
         data-pars="listar=true&definitivo&true"
         data-target="#blo_def"
          >DEFINITIVOS</a></li>
  <li><a class= "blo_tabs" href="#blo_proc" data-toggle="tab"
          data-url="{% url "generar_bloque" %}"
          data-pars="listar=true&enproceso&true"
          data-target="#blo_proc"
          >EN PROCESO</a></li>
</ul>

Here is javascript

<script type="text/javascript">
    $('.blo_tabs').on('shown.bs.tab', function (e) {
        tab = $(e.target); // activated tab
        warehouse_control.listar(
                tab.attr('data-url'),
                tab.attr('data-pars'),
                tab.attr('data-target')
        );
    });
</script>

This what warehouse_control.listar have.

listar: function(url, parametros, target){
        esperar.cubrir_especifico(target);
        $.get(url, parametros, function(response){
              $(target).html(response);
              esperar.descubrir();
         }, 'html' );
    }

Collectives™ on Stack Overflow

using twitter bootstrap with tabbed - ajax content

3 Answers 3

JSFiddle

JSFiddle

JSFiddle

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related