2

I am using Bootstrap tabs in my website. When page loads tab will be filled with data at run-time using dynamic content. I am using data-target attribute on anchor tag for that, but it does not seems to work at all.

Here is what I tried so far:

HTML

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="showTab1.do" data-target="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a>
            </li>
            <li role="presentation">
                <a href="showTab2.do" data-target="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a>
            </li>
            <li role="presentation">
                <a href="showTab3.do" data-target="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a>
            </li>   
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="test_1"></div>
            <div role="tabpanel" class="tab-pane active" id="test_2"></div>
            <div role="tabpanel" class="tab-pane active" id="test_3"></div> 
        </div>
    </div>
</div>

Here I am trying to load content of remote file showTab1.do inside div with id="test_1" when using data-target="#test_1" on anchor tag. But it is not working. What I know is if I am using data-target we don't need to write any jQuery/JavaScript to load data in tab as data-target will do that for us(correct me if I am wrong). My Bootstrap version is v3.3.6.

Please correct me where I am wrong. Thanks

mahendra kawde
  • 855
  • 4
  • 25
  • 44

3 Answers3

1

There is no way to automatically load data from another url into the tab content using data attributes. You'd need to fire the jQuery load() method when the show tab event fires...

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  ...

  $(target).load(url,function(result){      
    ...
  });
});

Example: http://codeply.com/go/xZfTnAtKUM

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Hey I just tried this way but it did not worked for me. But when I debug script I found it is able to get remote content but when we do `tab.tab('show');` it does not displayed anything. – mahendra kawde Feb 09 '16 at 11:09
0

HTML :

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a>
            </li>
            <li role="presentation">
                <a href="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a>
            </li>
            <li role="presentation">
                <a href="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a>
            </li>   
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="test_1"></div>
            <div role="tabpanel" class="tab-pane" id="test_2"></div>
            <div role="tabpanel" class="tab-pane" id="test_3"></div> 
        </div>
    </div>
</div>

and load the tab content using jQuery load

JAVASCRIPT:

<script>
$(document).ready(function () {
    $('#test_1').load('showTab1.do');
    $('#test_2').load('showTab2.do');
    $('#test_3').load('showTab3.do');
});
</script>
linktoahref
  • 7,812
  • 3
  • 29
  • 51
0

There were a couple of errors but this works. I added the Tab 1,2 and 3 to the tab panes so you can see the result when you click the nav links (jsut remove the text so it doesn't mess up your flow)..

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a></li>
            <li role="presentation"><a href="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a></li>
            <li role="presentation"><a href="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a></li>   
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="test_1">Tab 1</div>
            <div role="tabpanel" class="tab-pane fade" id="test_2">Tab 2</div>
            <div role="tabpanel" class="tab-pane fade" id="test_3">Tab 3</div> 
        </div>
    </div>
</div>

Hope this helps - and then load the data into the tab panes using the .load() method as described below.

gavgrif
  • 15,194
  • 2
  • 25
  • 27
  • There is no .load() method as you described in answer above. But I realize what you meant to say about. I am confused because why just having data-target on link does not loads data there ? I have had done like this in the past without writing any jquery. – mahendra kawde Feb 06 '16 at 13:30
  • Hi - sorry - I meant the .load() as described by @Rahul Chandrasekharan (who posted the answer before me). You could use the data-target attribute to identify the id of the tab you wish to toggle or just use the href to indicate it, but you cannot use that attribute to load external content into the tab pane div. For that yuo will need to use the .load() method. Hope this helps. – gavgrif Feb 06 '16 at 22:07