1

I have two pageBlockSections nested within a pageBlockSection, I want to display any one of these pageBlockSections depending on the selectOption value selected by the user.

    <apex:pageBlockSection id="mainSection" columns="2" title="Main Section">

            <apex:selectList value="{!selectedValue}" multiselect="false" size="1">
                <apex:selectOptions value="{!someList}"/>
                <apex:actionSupport event="onchange" action="{!updateData}" reRender="mainSection"/>
            </apex:selectList>

           <apex:pageBlockSection id="section1" rendered="{!section1}" ...>
           ..section data...
           </apex:pageBlockSection>

           <apex:pageBlockSection id="section2" rendered="{!section2}" ...>
           ..section data...
           </apex:pageBlockSection>

   </apex:pageBlockSection>

My controller for the page looks like the following

      public class MyController {
          public Boolean section1 {get; set;}
          public Boolean section2 {get; set;}
          public List<Selectoption> someList {get; set;}
          public String selectedValue {get; set;}

          public MyController() {
            section1 = false;
            section2 = false;
            someList = new List<SelectOption>{new Selectoption ('value1', 'label1'),
                                              new Selectoption ('value2', 'label2')};
          }

          public void updateData() {
             if(selectedValue == 'label1') {
                  section1 = true;
                  section2 = false;
             } else if(selectedValue == 'label2') {
                  section1 = false;
                  section2 = true;
             }
          }
      }

My problem is, upon the changing the select options non of the pageBlockSections are displayed.

3

You're comparing the label rather than the value in your controller for setting the boolean variable, which controls rendering of the PageBlockSections.

This is what the docs say on SelectOption

SelectOption option = new SelectOption(value, label);

where value is the String that is returned to the controller if the option is selected by a user, and label is the String that is displayed to the user as the option choice

So your controller code should read

if(selectedValue == 'value1') {
                  section1 = true;
                  section2 = false;
             } else if(selectedValue == 'value2') {
                  section1 = false;
                  section2 = true;
             }

Also as an aside, probably neater to nest the pageBlockSections in a pageBlock rather than in another pageBlockSection, unless there are UI reasons.

| improve this answer | |
  • I did changed the controller code you have suggested but it still made no difference. And where the nesting of the sections is concerned, I am nesting them within a pageBlock which I did not include in the code above. – codeinprogress Apr 5 '13 at 20:16
  • I've got it working in my dev org, and it reRenders just fine, there's prolly something else to it. Added some System.debugs and see what's going on. Check what the selectedValue variable evaluates to. – techtrekker Apr 5 '13 at 20:17
0

When you add to the map Selectoption you are adding key = value1 and pair =lable1

and when you check the {selected_value} you are checking

if(selected_value == label1) 

    check if(selected_value == 'value1') (or) when you put the key value do 

    Selectoption.add('lable1','lable1');
    Selectoption.add('lable2','lable2');

and use the existing code!! PAGE:

<apex:page controller="MyController">
<apex:form >
<apex:pageblock >
 <apex:pageBlockSection id="mainSection" columns="2" title="Main Section">

            <apex:selectList value="{!selectedValue}" multiselect="false" size="1">
                <apex:selectOptions value="{!someList}"/> 
                <apex:actionSupport event="onchange" action="{!updateData}" />
            </apex:selectList>

           <apex:pageBlockSection id="section1" rendered="{!section1}">
           ..section data 1...
           </apex:pageBlockSection>

           <apex:pageBlockSection id="section2" rendered="{!section2}">
           ..section data 2...
           </apex:pageBlockSection>

   </apex:pageBlockSection>
</apex:pageblock>
</apex:form>
</apex:page>

Updated controller :

public class MyController {
          public Boolean section1 {get; set;}
          public Boolean section2 {get; set;}
          public List<Selectoption> someList {get; set;}
          public String selectedValue {get; set;}

          public MyController() {
            section1 = false;
            section2 = false;
            someList = new List<SelectOption>{new Selectoption ('value1', 'label1'),
                                              new Selectoption ('value2', 'label2')};
          }

          public void updateData() {
             if(selectedValue == 'value1') {
                  section1 = true;
                  section2 = false;
             } else if(selectedValue == 'value2') {
                  section1 = false;
                  section2 = true;
             }
          }
      }

Additionally you are controlling the visibility of the section1 and section2 data using rendered attribute and you do not need to use the

`rerender={!mainSection}`
<apex:actionSupport event="onchange" action="{!updateData}" />

should work in your page. The action method will control what to display based on the Boolean conditions you specified in the update method

| improve this answer | |
  • I made the changes you suggested but nothing changed. I suspect there is some other way of rendering the pageBlockSections. – codeinprogress Apr 5 '13 at 18:25
  • I have added both the page and the contorller copy paste the same code and let me know if it works, I am sure it should because i have it working in my dev org. – Rao Apr 5 '13 at 18:27
  • If I do not use rerender={!mainSection} then the entire page is refreshed on change of the select option dropdown which results in showing error mesages for required fields (which were empty when the dropdown changed). – codeinprogress Apr 5 '13 at 18:55
  • so do the components render now ? I was just working on this page so i thought rerender was not required. The validations seems to be coming from the page. Please use the rerender attribute to stop the error messages and render only the particular component "mainpage" – Rao Apr 5 '13 at 19:00
  • The pageBlockSections are still not being rendered. The issue persists. – codeinprogress Apr 5 '13 at 19:34
0

I found out why my code was not working. It was because the selectedValue was being returned null at the controller, so it did not know which of the selectOptions was choose so the pageBlockSection never rendered. I now know how to make this work:

All you need to do is to enclose the selectList between actionRegion.

        <apex:page controller="MyController">
         <apex:form >
           <apex:pageblock >
                <apex:pageBlockSection id="mainSection" columns="2" title="Main Section"> 

                  <apex:actionRegion>
                     <apex:selectList value="{!selectedValue}" multiselect="false" size="1">
                       <apex:selectOptions value="{!someList}"/> 
                       <apex:actionSupport event="onchange" action="{!updateData}" />
                     </apex:selectList>
                  </apex:actionRegion>

              <apex:pageBlockSection id="section1" rendered="{!section1}">
                 ..section data 1...
              </apex:pageBlockSection>

             <apex:pageBlockSection id="section2" rendered="{!section2}">
                ..section data 2...
             </apex:pageBlockSection>

         </apex:pageBlockSection>
       </apex:pageblock>
      </apex:form>
     </apex:page> 

At the controller side we use Pagereference instead of null for the updateData method

       public class MyController {
      public Boolean section1 {get; set;}
      public Boolean section2 {get; set;}
      public List<Selectoption> someList {get; set;}
      public String selectedValue {get; set;}

      public MyController() {
        section1 = false;
        section2 = false;
        someList = new List<SelectOption>{new Selectoption ('value1', 'label1'),
                                          new Selectoption ('value2', 'label2')};
      }

      public Pagereference updateData() {
         if(selectedValue == 'value1') {
              section1 = true;
              section2 = false;
         } else if(selectedValue == 'value2') {
              section1 = false;
              section2 = true;
         }
         return null;
      }
  }

Now I am guessing you need to do this only if you are using selectList within pageBlockSection.

I am not sure if anyone else faced the same problem as me, but if they did then this is the solution.

Credits to greenstork for coming up with the solution.

| improve this answer | |
0

Try with this changes in your controller.. This may help..

public class MyController {
      public Boolean section1 {get; set;}
      public Boolean section2 {get; set;}
      public List<Selectoption> someList {get; set;}
      public String selectedValue {get; set;}

      public MyController() {
        section1 = false;
        section2 = false;
        someList = new List<SelectOption>{new Selectoption ('section1', 'label1'),
                                          new Selectoption ('section2', 'label2')};
      }

      public Pagereference updateData() {
         if(selectedValue == 'section1') {
              section1 = true;
              section2 = false;
         } else if(selectedValue == 'section2') {
              section1 = false;
              section2 = true;
         }
         return null;
      }
  }
| improve this answer | |

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.