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/

Answer 1

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