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 '16 at 8:08
  • What's the rerender in your next command button?
    – sfdcFanBoy
    Oct 19 '16 at 9:39
  • i copied your code and placed a pageblocktable inside home section, rerendering the page block.
    – Raul
    Oct 19 '16 at 9:52

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 '16 at 9:40
  • did u replace '.nav-tabs' with the element id/class that you need?
    – ipradhansk
    Oct 13 '16 at 9:56
  • Isnt nav-tabs the one that should be enabled!
    – sfdcFanBoy
    Oct 13 '16 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 '16 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 '16 at 12:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.