0

I have a Bootstrap tabbed pane. Now I want to load dynamic data into using jQuery click event.

HTML:

<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#sectionA">Section A</a></li>
    <li><a href="#sectionB">Section B</a></li>
    <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#dropdown1">Dropdown1</a></li>
            <li><a href="#dropdown2">Dropdown2</a></li>
        </ul>
    </li>
</ul>
<div class="tab-content">
    <div id="sectionA" class="tab-pane in active">
        <h3>Section A</h3>
        <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
    </div>
    <div id="sectionB" class="tab-pane">
        <h3>Section B</h3>
        <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
    </div>
    <div id="dropdown1" class="tab-pane">
        <h3>Dropdown 1</h3>
        <p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis. Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p>
    </div>
    <div id="dropdown2" class="tab-pane">
        <h3>Dropdown 2</h3>
        <p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis.</p>
    </div>
</div>

jQuery:

 $(document).ready(function () {
    $("#myTab a").click(function (e) {
        e.preventDefault();

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

Now my question is how to get to know that which tabbed tab has been clicked and can take the value into variable and then add values to the tabbed pane.

Vikas
  • 13
  • 1
  • 8

1 Answers1

0
var active = $( ".selector" ).tabs( "option", "active" );

Replace .selector by your one. Then active.attr( 'id' ) will return exactly what you need.

or bootstrap:

$("ul#sampleTabs li.active")

Find Active Tab using jQuery and Twitter Bootstrap

Community
  • 1
  • 1
messerbill
  • 5,499
  • 1
  • 27
  • 38
  • bootstrap is handled with
  • ...$("ul#sampleTabs li.active") http://stackoverflow.com/questions/12040820/find-active-tab-using-jquery-and-twitter-bootstrap
    • – messerbill Jan 23 '15 at 07:19
  • I added `var activetab = $("ul#myTab li.active"); alert(activetab);` but getting only `object object` in the alert box..Can you please correct me ..Thanks.. – Vikas Jan 23 '15 at 07:23
  • try to output via console instead of alert (if you use chrome "console.log(activetab);" – messerbill Jan 23 '15 at 07:25
  • Thank you very much for your suggestion.Now i am seeing `Object[li.active]` in my console..How to get the name of the active pane?please guide me that – Vikas Jan 23 '15 at 07:31
  • "console.log("name:");console.log(activetab.attr("name");" - Does this work? – messerbill Jan 23 '15 at 07:35
  • so try "console.log($(activetab).parent('li').attr("name");" – messerbill Jan 23 '15 at 07:48
  • I am sorry to inform you again that it is also giving `undefined` in console – Vikas Jan 23 '15 at 07:51
  • sorry its early :D of course you have to define the name in your html elements, just like
    , otherwise you will get undefined
     – messerbill Jan 23 '15 at 07:55
  • or if you wanna have the id use "console.log($(activetab).parent('li').attr("id");" – messerbill Jan 23 '15 at 07:57
  • Dear Sir..Actually i am new bie in this field ..Will you please see my HTML code Posted in the question ..I have shared all HTML code ..Please direct me what i need to change there ..thanks.. – Vikas Jan 23 '15 at 08:13
  • http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Tab_Events_Javascript.php this is exactly what your are searching for – messerbill Jan 23 '15 at 13:10