0

I want to load one page block section on the same VF Page only after the user select the value in the Picklist(which is on the same VFPage). I have used render and reRender option but it does not work for me as I guess that needs value submitted first for the picklist and than after it can affect.

I am creating VFPage for opportunity edit Screen. So I want user to only add date in certain fields if the previous pick-list is selected as yes.

I have also refered to this post here How to hide a section in visualforce page onchange of picklist element

but it is not loading page block section after I change the picklist value to yes. It seems I will required to do this through AJAX. but I don't know how.

Can anyone please help with this ?

My code snippet

<apex:page standardController="Opportunity" sidebar="true" showHeader="true" extensions="Opp_edit" id="page" tabStyle="Opportunity" action="{!doLoad}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript">
    </script>
 <apex:pageBlockSection>

<apex:pageBlockSectionItem >
                       <apex:outputLabel value="Electricity" for="Elec"/>
                       <apex:inputField value="{!opportunity.Electricity__c}" id="OppElectricity">
                        <apex:actionSupport event="onchange" reRender="SectionID" id="AS"/>
                       </apex:inputField>
                   </apex:pageBlockSectionItem>  

 <apex:pageBlockSection>
 <apex:pageBlockSection title="SectionB" columns="2"  id="SectionID" rendered="{! opportunity.Electricity__c=='yes'}">
<apex:pageBlockSectionItem></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem></apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:page>
Improve this question
4
  • 1
    You need to add <apex:actionSupport> to the picklist field that will submit the changed value to the controller using AJAX and will also re-Render the page block section.
    – Aayush K
    Commented Sep 21, 2015 at 15:33
  • 1
    Can you post the code that you have developed. It will be helpful in understanding the behaviour and resolving the issue.
    – manjit5190
    Commented Sep 21, 2015 at 15:36
  • I have added my code snippet which gives Idea what i am trying to achieve
    – Ricky
    Commented Sep 21, 2015 at 15:55
  • @AAU I have already used actionsupprt at the picklist have a look at my code snippet which I have just now added to my question.
    – Ricky
    Commented Sep 21, 2015 at 15:56

2 Answers 2

Reset to default
1

You don't need jquery to do this, so you can remove that. It should be a simple matter of :

<apex:page standardController="Opportunity" sidebar="true" showHeader="true" id="page" tabStyle="Opportunity">
  <apex:form >
    <apex:pageBlock >
      <apex:pageBlockSection >
        <apex:pageBlockSectionItem >
          <apex:inputField value="{!Opportunity.StageName}" id="OppElectricity" >
            <apex:actionSupport event="onchange" reRender="SectionID"/>
          </apex:inputField>
        </apex:pageBlockSectionItem>  
      </apex:pageBlockSection>
      <apex:outputPanel id="SectionID" >
        <apex:outputPanel rendered="{!IF(Opportunity.StageName == 'Prospecting',True,False)}">
          <apex:pageBlockSection title="SectionB" columns="2" >
            <apex:pageBlockSectionItem >ITEM 1</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >ITEM 2</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >ITEM 3</apex:pageBlockSectionItem>
          </apex:pageBlockSection>
        </apex:outputPanel>
      </apex:outputPanel>
    </apex:pageBlock>
  </apex:form>
</apex:page>

Unless you're trying to have only certain fields in the section display, instead. You'd still put the rerender on the outputpanel, but you'd want to set the rendered on the actual section items.

Improve this answer
10
  • Hi Adam Thanks for your answer, I have already done exact same thing.But changing the value of picklist does not change display the block . Also I am comparing value by this way rendered="{! opportunity.Electricity__c=='yes'} because ISPICKVAL() does not work either. It gives another error Called expecting pickval, raceived text . DO you think that could cause problem?
    – Ricky
    Commented Sep 21, 2015 at 20:16
  • Are you sure about: 1) Location of the outputpanel closure 2) The Capitalization of the Picklist Text?
    – Adam Michael Daw
    Commented Sep 21, 2015 at 20:23
  • Ya. I even have double checked now. And Both of them is the same way as in your code.
    – Ricky
    Commented Sep 21, 2015 at 20:32
  • Picklist Capitalization Does match with the value of picklist
    – Ricky
    Commented Sep 21, 2015 at 20:32
  • I also want to clarify, what i am trying to achieve here, I simply want one page block on the visual force edit page to load for user in which they can enter values for the fields displayed, when Picklist value is yes, this picklist is also on the same page, I haven't done this in past. That's why I wanted to confirm this again?
    – Ricky
    Commented Sep 21, 2015 at 21:09
0

Add apex:outputPanel above apex:pageBlockSection and reRender outputpanel when Selection options is changed.

<apex:page standardController="Opportunity" sidebar="true" showHeader="true" extensions="Opp_edit" id="page" tabStyle="Opportunity" action="{!doLoad}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
    <apex:pageBlockSection>
        <apex:pageBlockSectionItem >
            <apex:outputLabel value="Electricity" for="Elec"/>
                <apex:inputField value="{!opportunity.Electricity__c}" id="OppElectricity">
                    <apex:actionSupport event="onchange" reRender="SectionID" id="AS"/>
                </apex:inputField>
        </apex:pageBlockSectionItem>  
    <apex:pageBlockSection>
    <apex:outputPanel id="SectionID">
        <apex:pageBlockSection title="SectionB" columns="2"  rendered="{! opportunity.Electricity__c=='yes'}"/>
    </apex:outputPanel>
    <apex:pageBlockSectionItem></apex:pageBlockSectionItem>
    <apex:pageBlockSectionItem></apex:pageBlockSectionItem>
    <apex:pageBlockSectionItem></apex:pageBlockSectionItem>
    </apex:pageBlockSection>
</apex:page>
Improve this answer
4
  • I cannot wrap up <apex:pageBlockSection> in <apex:outputPanel id="SectionID"></apex:outputPanel> as it gives following error The element type <apex:pageblocksection> must be terminated by the matching end-tag </apex:pageblocksection>
    – Ricky
    Commented Sep 21, 2015 at 16:55
  • My bad the <apex:pageBlockSection title="SectionB" columns="2" rendered="{! opportunity.Electricity__c=='yes'}"/> was not closed. Please see the updated code now.
    – Saroj Bera
    Commented Sep 21, 2015 at 17:38
  • Closing that tab resolved the error. but it is by default hiding the pageblock section title only and not entire section with the fields. Fields are still visible and merged with the previous page block. IS it working at your end? Did you test?
    – Ricky
    Commented Sep 21, 2015 at 18:18
  • Changing the picklist value of Electricity__c to yes does not make it visible either
    – Ricky
    Commented Sep 21, 2015 at 18:34

You must log in to answer this question.

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