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.

Improve this question
9
  • 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
    Commented Feb 7, 2014 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
    Commented Feb 7, 2014 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
    Commented Feb 7, 2014 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
    Commented Feb 7, 2014 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
    Commented Feb 7, 2014 at 17:15

3 Answers 3

Reset to default
1

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

var j$ = jQuery.noConflict();

works fine for me

Improve this answer
2
  • 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
    Commented May 10, 2014 at 23:33
  • I disagree @AlexTennant this is a well known solution to broken tabPanel components.
    – Adrian Larson ♦
    Commented May 5, 2015 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.

Improve this answer
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.

Improve this answer

You must log in to answer this question.

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