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>
  • 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 Sep 21 '15 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 Sep 21 '15 at 15:36
  • I have added my code snippet which gives Idea what i am trying to achieve – Ricky Sep 21 '15 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 Sep 21 '15 at 15:56
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.

  • 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 Sep 21 '15 at 20:16
  • Are you sure about: 1) Location of the outputpanel closure 2) The Capitalization of the Picklist Text? – Adam Michael Daw Sep 21 '15 at 20:23
  • Ya. I even have double checked now. And Both of them is the same way as in your code. – Ricky Sep 21 '15 at 20:32
  • Picklist Capitalization Does match with the value of picklist – Ricky Sep 21 '15 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 Sep 21 '15 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>
  • 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 Sep 21 '15 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 Sep 21 '15 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 Sep 21 '15 at 18:18
  • Changing the picklist value of Electricity__c to yes does not make it visible either – Ricky Sep 21 '15 at 18:34

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.