1

I have created a Vf page in which i want to display 2 apex:pageBlock. I created the apex:tabPanel as demo for the first time and tested it was working

content for tab one content for tab two

After this i made some changes to code and added my code to the existing code the tabs, now the tabs do not work as it was changing earlier. my code updated code

  <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel"> 

    <apex:tab label="Offers" name="offers" id="offersId" immediate="true">
         <apex:pageBlock>
             <apex:ListViews type="Offers__c" />
         </apex:pageBlock>
    </apex:tab>

    <apex:tab label="Submit IP for Approval" name="IPApproval" id="IPApprovalId">            
        <apex:pageBlock id="Approvalpanal" >
            <apex:pageBlockSection title="Submit IP for Approval">
                <apex:form>
                    <c:AutoCompleteV2 allowClear="true" importJquery="true" labelField="Name" SObject="Offers__c" valueField="Id" targetField="{!targetField}" style="width:200px"/>  
                    <apex:InputField value="{!appr.IP_address__c}" style="width:300px;"/>
                </apex:form>
            </apex:pageBlockSection>
            <apex:pageBlockButtons >
                <apex:form>
                    <apex:commandButton action="{!saveForApproval}" value="Save For Approval" />     
                </apex:form>                  
            </apex:pageBlockButtons>            
         </apex:pageBlock>
    </apex:tab>



    </apex:tabPanel>`

Can anybody guide me what i am getting wrong.

  • 3
    I've copied + pasted your code into my dev org, and, minus the component and the IP address field, the tab structure appears to work for me? Can you clarify what "does not work" means for you, ie. what behaviour you are expecting? Otherwise, I am inclined to suggest it is infact the component which is breaking the page. Incidentally, the "selectedTab" attribute is not referencing a valid tab name, but that doesn't cause an error! – Simon Lawrence Feb 7 '14 at 15:52
  • first tab is for offer view and second tab for Submit IP for Approval. I am only able to see the first tab not the second tab when i click on it. I have published the VF page as site. The url for site is - onlinetest-developer-edition.ap1.force.com/apex/… – AnuRaj Feb 7 '14 at 15:56
  • that is interesting. Try replacing your component line with something like just the text "component" and see if the tab comes back to life? – Simon Lawrence Feb 7 '14 at 16:00
  • yes that is what i am trying to say that it work text. Not with pageblock and components in it.I tried this code salesforce.com/us/developer/docs/pages/Content/…. This code works with text. – AnuRaj Feb 7 '14 at 16:16
  • 1
    Hmm. Well tabPanels do work with both pageBlocks and components in them, no problem. So I would have to suggest that is is something IN the component markup that is breaking the code. – Simon Lawrence Feb 7 '14 at 17:15
1

if you are not able to switch between ur tabs use this code :

var j$ = jQuery.noConflict();

works fine for me

  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post. – Alex Tennant May 10 '14 at 23:33
  • I disagree @AlexTennant this is a well known solution to broken tabPanel components. – Adrian Larson May 5 '15 at 3:45
0

I would look at the code in the component you are including in one of the tabs. Everything about the tab layout looks fine, and it works in my Dev org (without the component - which of course I don't have).

You might find it easier to debug by copying (temporarily) the component (don't forget the controller!) into the page, and seeing how it behaves, bit by bit.

0

To follow up a little bit on the answer by user8305, the underlying Javascript for the apex:tabPanel component relies on the PrototypeScript library that collides with the $ global variable. So you need to call

jquery.noConflict();

in your code if the page contains jQuery otherwise you will break the PrototypeScript library. See this post for detail.

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.