Question

I have this scenario: on second tab there is a form with submit button – I want make second tab active after submission, however the first is active by default.

I looked something on Bootstrap site – http://twitter.github.com/bootstrap/javascript.html#tabs, but couldn’t find info, that I wanted to find,

My HTML :

  <ul id="myTab" class="nav nav-tabs">
    <li class="reports active left"><a href="#home" data-toggle="tab" >Details</a></li>
    <li class="reports right not_active" ><a href="#profile" data-toggle="tab" >Analytics</a></li>
  </ul>

I can activate tab like this:

  $('#myTab a:last').tab('show');

I can’t simply call this after I clicked, because page is reloaded.

I should add some notifier, that form is subitted or what would be the better way ?

Answer 1

If it is an option, you could post the form using $.ajax() instead of doing an ordinary form post, and in you success-callback you activate the button.

$("#my-form-id").submit(function () {
    $.ajax({
      url: "my-form-handler.php",
      type: "POST",
      data: $("#my-form-id").serialize(),
      success: function(data) {
        $('#myTab a:last').tab('show');
      }
    });
    return false;
});