Tab Panel Error

Question

I have a visualforce page with two tabs.But when i click on second tab data is not displaying.

Visualforce Page :

    <apex:page standardController="Account" extensions="FinHistroyController">
 <apex:form >   
<apex:tabPanel switchType="client"
     selectedTab="newOrgFinHis" id="orgFinTabPanel"
            tabClass="activeTab" inactiveTabClass="inactiveTab">
     <apex:tab label="Add New Org Fin Hist" name="newOrgFinHis" id="tabOne">
    <apex:pageBlock id="theBlock">
       <apex:pageblockButtons location="top">
        <apex:commandButton value="Save" action="{!save}">
        </apex:commandButton>
        <apex:commandButton value="Cancel" action="{!cancel}">
        </apex:commandButton>
       </apex:pageblockButtons>
     <apex:pageblockSection title="Org Fin History Details" Columns="2">
       <apex:outputField value="{!ofh.Account__c}"/>
       <apex:outputField value="{!ofh.Account__c}"/>
       <apex:outputField value="{!ofh.Start_of_Period__c}"/>
       <apex:inputField value="{!ofh.Start_of_Period__c}"/>
       <apex:outputField value="{!ofh.End_of_Period__c}"/>
       <apex:inputField value="{!ofh.End_of_Period__c}"/> 
      </apex:pageblockSection>
      </apex:pageBlock>
    </apex:tab>
     <apex:tab label="Historical" name="OrgFinHis" id="tabTwo"> 
     <apex:pageblock id="olist" title="Historical">
       <apex:pageblocktable value="{!ofhList}" var="o" rendered="{!NOT(ISNULL(ofhList))}">
        <apex:column value="{!o.Name}"/>
        <apex:column value="{!o.Start_of_Period__c}"/>
        <apex:column value="{!o.End_of_Period__c}"/>
       </apex:pageblocktable>
       </apex:pageblock>
      </apex:tab>
     </apex:tabPanel>
    </apex:form> 
    </apex:page>

Answer 1

I was getting some javascript errors.I don't have any jquery or javascript lib on visualforce page.But when i added below script to visualforce page tabs are working.I think visualforce tabpanel throws javascript errors to some users.please find another post in salesforce stack exchange related to same issue

<script type="text/javascript" language="javascript">
 jQuery.noConflict();
</script>

Also another link

Answer 2

Back to Basics. Once i remove the bindings to the extension controller the page and tabs render fine for me, see screenshots and code below.

Step by Step. If I had access to the controller logic I would start by adding back one by one the bindings until I can see what the issue is. First try the code below in a new page and add the 'extensions' attribute on apex:page, then add the pageBlockTable with the 'rendered' attribute, in the second tab (but without the columns). What happens then?

Debugging Expressions. You can also see the results of your expressions by simply including them on your page for example...

<p>Value of this expression is {!NOT(ISNULL(ofhList))}</p>

<apex:page standardController="Account">
    <apex:form >
        <apex:tabPanel switchType="client" selectedTab="newOrgFinHis"
            id="orgFinTabPanel" tabClass="activeTab"
            inactiveTabClass="inactiveTab">
            <apex:tab label="Add New Org Fin Hist" name="newOrgFinHis"
                id="tabOne">
                <apex:pageBlock id="theBlock">
                    <apex:pageblockButtons location="top">
                        <apex:commandButton value="Save" action="{!save}">
                        </apex:commandButton>
                        <apex:commandButton value="Cancel" action="{!cancel}">
                        </apex:commandButton>
                    </apex:pageblockButtons>
                        <apex:pageblockSection title="Org Fin History Details" Columns="2">
                        <!-- 
                        <apex:outputField value="{!ofh.Account__c}" />
                        <apex:outputField value="{!ofh.Account__c}" />
                        <apex:outputField value="{!ofh.Start_of_Period__c}" />
                        <apex:inputField value="{!ofh.Start_of_Period__c}" />
                        <apex:outputField value="{!ofh.End_of_Period__c}" />
                        <apex:inputField value="{!ofh.End_of_Period__c}" />
                         -->
                    </apex:pageblockSection>
                </apex:pageBlock>
            </apex:tab>
            <apex:tab label="Historical" name="OrgFinHis" id="tabTwo">
                <apex:pageblock id="olist" title="Historical">
                    <!-- 
                    <apex:pageblocktable value="{!ofhList}" var="o"
                    rendered="{!NOT(ISNULL(ofhList))}">
                        <apex:column value="{!o.Name}" />
                        <apex:column value="{!o.Start_of_Period__c}" />
                        <apex:column value="{!o.End_of_Period__c}" />
                    </apex:pageblocktable>
                     -->
                </apex:pageblock>
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
</apex:page>

Answer 3

What happens if you remove all your dynamic content in the tabs and replace it with static text/html? Does the tab switching work then?

Try to rerender the block which contains data related to second tab. Basically, just add reRender attribute to your second tab component, and specify the id of the block to update. Also, replace the value in switchType with value "ajax".

 <apex:tab label="Historical" name="OrgFinHis" id="tabTwo" reRender="HistoricalContent"> 
 <apex:outputPanel id="HistoricalContent">
 <apex:pageblock id="olist" title="Historical">
   <apex:pageblocktable value="{!ofhList}" var="o" rendered="{!NOT(ISNULL(ofhList))}">
    <apex:column value="{!o.Name}"/>
    <apex:column value="{!o.Start_of_Period__c}"/>
    <apex:column value="{!o.End_of_Period__c}"/>
   </apex:pageblocktable>
   </apex:pageblock>
 </apex:outputPanel>
  </apex:tab>

Hope it helps!