Bootstrap Nav Tabs Becomes Inactive on ReRender

Question

I have a Bootstrap Nav Tabs (2 tabs) with some content in both tabs. The first tab has PageblockTable with StandardSetController Pagination.

When I click on Next button. The next set is rendered correctly. Everything is fine except both the tabs Home and Menu1 becomes inactive. The Home Tab should remain in Active. How to set that?

<apex:pageBlock id="pbId">

    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
      <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Some content AND a PageblockTable with Standard Set Controller Pagination</p>  
      <apex:commandLink reRender="pbId" value="Next" action="{!next}"/>       
    </div>

    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Some content in menu 1.</p>
    </div>    
  </div>

</apex:pageBlock>

How to set the class as active on clicking the commandlink. The commandlink should also execute {!next} method.

For reference, the next method is just this.

    public void next(){
        this.setcon.next();
        setApplication();
    }

Answer 1

You just need to call the bootstrap tab function again in onComplete function

<apex:commandLink action="{!next}" oncomplete="enableTab()">Next</apex:commandButton>

<script>
    var enableTab = function(){
        $('.nav-tabs').tab()
    }
</script>

Answer 2

I've had a similar problem with something else.

The problem is to do with reRendering the HTML and not the JS at the same time. For instance, I like to use a JS based component called PageBlockTableEnhancerADV. I had something that looked a bit like this:

<apex:outputPanel id="adminpanel" rendered="{!isAdmin}">
  <apex:pageBlock title="Admin Panel">
    <c:PageBlockTableEnhancerADV targetPbTableIds="mycallstoday" pageSizeOptions="10,20,50,100,200" defaultPageSize="10" enableExport="false" />
    <apex:form>
      <apex:pageBlockTable id="mycallstoday" value="{!contacts}" var="c">
        <apex:column value="{!c.c.Name}" />
        <apex:column value="{!c.c.Phone}" />
        <apex:column value="{!c.c.Email}" />
        <apex:column value="{!c.c.MobilePhone}" />
      </apex:pageBlockTable>
      <apex:commandButton action="{!doSomething}" value="Submit" reRender="mycallstoday" />
    </apex:form>
  </apex:pageBlock>
</c:outputPanel>

Notice I'm ReRendering the pageBlockTable here and not the outputPanel. This broke the JS used by the component.

When I rerendered the outputPanel instead, this worked and the JS initialised properly.

Basically the problem is all to do with re initialising the JS. You could do it be reRendering the component like in my case (or even reRendering something with Bootstrap's JS in it), but a cleaner approach would be just to reinitialise the specific function you're using when you reRender.