3

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>
  • What's onclick="" doing in the second tab? What happens if you remove that? – Matt Lacey Nov 26 '13 at 4:42
  • I have removed onclick="" and still not working – sfdc Nov 26 '13 at 4:44
  • Since the pageblocktable is rendered based on ofhlist not being null, are you sure that it's not null? Can you try a system.debug in the controller to confirm it isnt null. – Chris Duncombe Nov 26 '13 at 4:59
  • ofhlist is not null when i make selectedtab on tabpanel as secondone it is showingdata. – sfdc Nov 26 '13 at 5:00
5

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

3
+25

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>

enter image description here

enter image description here

<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>
  • Thank you @Andrew Fawcett.I don't have any jquery or javascript lib on my page but when i added below script to my visualforce page tabs are working <script type="text/javascript"> jQuery.noConflict(); </script> – sfdc Dec 2 '13 at 12:15
  • Most interesting, glad you got it sorted and shared the answer, +1! :-) – Andrew Fawcett Dec 2 '13 at 16:04
0

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!

  • I have removed the dyanamic content and replaced with outputtext and stil it is not workinng.Also I tried adding switchType to ajax and reRender the second tab component and still not working – sfdc Nov 26 '13 at 17:06
  • 2
    @sf.dev do you have jQuery or any other library un the page ? I just tried your code seems working for me. – Avidev9 Nov 29 '13 at 7:30
  • 1
    Just wanted to come up with the same question as @Avidev9. We were also wondering about a non-working tab until we created our own jQuery object using JQuery.noconflict(). If you're using Google Chrome, can you see any messages the Javascript console? For other browsers, there are similar options to spot any Javascript errors. – FrankZ Dec 1 '13 at 19:39
  • Thank you @FrankZ.I have added <script type="text/javascript"> jQuery.noConflict(); </script> to my visualforce page and its working. – sfdc Dec 2 '13 at 12:07

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.