CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
SpringLearner
SpringLearner

Reputation: 13844

Is it possible to refresh bootstrap tab

I am using bootsrap tab.I have actually three sections.By default section one is selected.Suppose if I move to section 2 then data of section 2 should be refreshed. Actually I have registration form in section 1 and in section 2 to view the resgitered users.So suppose i entered some details in section 1 then it is inserted into database.Now unless I refresh the section 2,I wont get new values from DB.Please tell me how to refresh.Alternate solutions are also welcome

<div class="tabbable" id="myTabs">
  <ul class="nav nav-tabs">
    <li><a id="tabAll">All</a></li>
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
    <div class="tab-pane" id="tab3">
      <p>Howdy, I'm in Section 3.</p>
    </div>
  </div>
</div>
<script>
$('#tabAll').click(function(){
  $('#tabAll').addClass('active');  
  $('.tab-pane').each(function(i,t){
    $('#myTabs li').removeClass('active'); 
    $(this).addClass('active');  
  });
});
</script>

Upvotes: 1

Views: 2894

Answers (2)

Alex Art.
Alex Art.

Reputation: 8781

When you click on section 2 tab make an ajax call to your DB in order to fetch new values. Another option is to do the refresh after you submit your form (I assume that you also do it using ajax) simply load a new content to "#tab2" div in ajax success handler of your form submission event

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

  1. You can use location.hash to manipulate tab selection accordingly.
  2. Or use Sammy js
  3. Localstorage is another option, refer this

Upvotes: 1

Related Questions