Calling twitter bootstrap tab function from within another function

Question

With bootstrap-tab.js I want to activate a tab, calling it from within another function. Html:

<a onClick='activate_tab()'>Activate Tab</a>
<ul class='nav nav-tabs hydro' id='nav_tabs'>
  <li class='active'><a href='#1' data-toggle='tab'>First</a></li>
  <li class=''><a href='#2' data-toggle='tab'>Second</a></li>
  <li class=''><a href='#3' data-toggle='tab'>Third</a></li>
</ul>
<div class='tabbable'>
  <div class='tab-content'>
    <div class='tab-pane active' id='1'>content first</div>
    <div class='tab-pane ' id='2'>content second</div>
    <div class='tab-pane ' id='3'>content third</div>
  </div>
</div>

I am able to activate the tab on page load with the following:

<script>jQuery(function($){$('#nav_tabs li:eq(2) a').tab('show');})</script>

And the tabs activate properly by clicking on the respective anchor elements. The following does not work:

function activate_tab(){
    //process other data...then goto tab
    alert(1);
    $('#nav_tabs li:eq(2) a').tab('show');
    alert(2);
}

I am new to javascript/jQuery.

[EDIT] I stripped the original page down to just what's shown above and it works. So, likely a conflict with other functions. Sorry to waste your time.

@JustinY in test mode, by onClick of an anchor. Ultimately it will be an onChange of a text input. — tgrass
– tgrass, Commented May 5, 2012 at 17:47
When you say that activate_Tab() doesn't work, what do you mean? What happens when it's called? When you show tab 2, are you making sure that tab 1 and tab 3 are hidden? — user879121
– user879121, Commented May 5, 2012 at 17:50
do you place active_tab() within jquery wrap i.e jQuery(function($) {}); — thecodeparadox
– thecodeparadox, Commented May 5, 2012 at 17:50
@JustinY (I edited the activate_tab() above) Alert '1' fires, Alert '2' does not. Do I need to call a function that hides the other tabs? — tgrass
– tgrass, Commented May 5, 2012 at 17:52

thecodeparadox · Accepted Answer · 2012-05-05 17:53:06Z

1

try this if you dont

    <script>
    jQuery(function($){

      function activate_tab(){
        //process other data...then goto tab
        alert(1);
        $('#nav_tabs li:eq(2) a').tab('show');
        alert(2);
      }

    });
   </script>

answered May 5, 2012 at 17:53

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

1 Comment

tgrass Over a year ago

I've added this and I do not receive Alert '1' after clicking the respective anchor.

Collectives™ on Stack Overflow

Calling twitter bootstrap tab function from within another function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related