[SalesForce] On Visual Force Page I want to load Pageblock section if the Pick list value is selected yes on the same page

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>

Best Answer

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.

Related Topic