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

enter image description here

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?

enter image description here

<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>

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

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


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(){
  • I used standardSetController and tried to replicate what you are trying do, but on click of next button its working fine for me. Unable to reproduce the issue.
    – Raul
    Oct 19, 2016 at 8:08
  • What's the rerender in your next command button?
    – sfdcFanBoy
    Oct 19, 2016 at 9:39
  • i copied your code and placed a pageblocktable inside home section, rerendering the page block.
    – Raul
    Oct 19, 2016 at 9:52

2 Answers 2


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

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

    var enableTab = function(){
  • That didn't help :(
    – sfdcFanBoy
    Oct 13, 2016 at 9:40
  • did u replace '.nav-tabs' with the element id/class that you need?
    – ipradhansk
    Oct 13, 2016 at 9:56
  • Isnt nav-tabs the one that should be enabled!
    – sfdcFanBoy
    Oct 13, 2016 at 11:43

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: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:commandButton action="{!doSomething}" value="Submit" reRender="mycallstoday" />

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.

  • Thanks but I dont think its a rerender problem. In my case, what do you think should be rerendered?
    – sfdcFanBoy
    Oct 13, 2016 at 11:45
  • @sfdcFanBoy I would start with the actual jQuery link itself. Then try narrowing it down to the specific function.
    – Dan Jones
    Oct 13, 2016 at 12:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .