function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jina ChetiaJina Chetia 

How to Hide/show a pageBlock depending upon the button selection?

Hi,

I am trying to build a questionare page where on click of Yes/No will determine the second question. I will have all the question on the same page in different page blocks but I dont want them to appear together. Suppose I select 'Yes' for the first question then display the second question which is in the second pageblock, if no then show a different question.

In the code below - I having two pageblocks and on select of 'Yes' button I want to display the content in the second pageblock and if 'No' then don't show the next question. I was trying to dynamically set the value of 'rendered' in the controller depending on the button selected but it is not working. Everytime I call the Controller onclick of button, it sets the value for ' rendered ' but since the page reloads, I lose my set value and it is always the default false and the second section never appears.

Please find the code of my Controller and Page below-

<apex:page controller="Wizard_3a_Controller">
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection title='Rate Information'>
Are there proposed non-standard electronic rates?<br/>
<apex:commandButton onclick='{!showSection1}' value='Yes' styleClass='btn'></apex:commandButton>

<apex:commandButton onclick='{!showSection2}' value='No' styleClass='btn'></apex:commandButton>
</apex:pageBlockSection>
<apex:outputPanel id='details'>
<apex:pageBlockSection id ='newData' title='Discount Rates' rendered='{!hideshow}'>
Enter Proposal range -
</apex:pageBlockSection>

</apex:outputPanel>

</apex:pageBlock>
</apex:form>
</apex:page>

public class Wizard_3a_Controller
{
Boolean testval = false;
public String getShowSection1()
{
testval= true;
return null;

}
public String getShowSection2()
{
testval= false;
return null;

}

public Boolean getHideshow()
{
return testval;
}

}

The value of hideshow is not getting changed, it is always false.
Can anyone please help me soving this issue?

Thanks
Jina
Ron HessRon Hess
you will need a setter



Code:
public void setHideshow(boolean s)
{
 testval = s;
}

 

also, if you could post your src code inside a SRC block, it is easier to test your code. the smilies don't compile.
Jina ChetiaJina Chetia
Thanks.. I will try that out. Do I need to make any change to the Page code? I am adding the source code for the Page and this time I have put  it inside the SRC Code :).
Code:
<apex:page controller="Wizard_3a_Controller">
        <apex:form>
                <apex:pageBlock>
                        <apex:pageBlockSection title='Rate Information'>
                                Are there proposed non-standard electronic rates—<br/>
                                <apex:commandButton onclick='{!showSection1}' value='Yes' styleClass='btn' rerender='details'></apex:commandButton>
                                <apex:commandButton onclick='{!showSection2}' value='No' styleClass='btn'></apex:commandButton>
                        </apex:pageBlockSection>
                        <apex:outputPanel id='details'>
                        <apex:pageBlockSection id ='newData' title='Discount Rates' render='{!getHideshow}'>
                         Enter Proposal range
                        </apex:pageBlockSection>

                        </apex:outputPanel>
                     
                  </apex:pageBlock>
        </apex:form>
</apex:page>

 
Jina ChetiaJina Chetia
I have added the set block but still it does not work.. I resending the latest code, there was some mistake in the earlier code..
Code:
<apex:page controller="Wizard_3a_Controller">
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection title='Rate Information'>
Are there proposed non-standard electronic rates—<br/>
<apex:commandButton onclick='{!showSection1}' value='Yes' styleClass='btn' rerender='details'></apex:commandButton>
<apex:commandButton onclick='{!showSection2}' value='No' styleClass='btn'></apex:commandButton>
</apex:pageBlockSection>
<apex:outputPanel id='details'>
<apex:pageBlockSection id ='newData' title='Discount Rates' rendered='{!hideshow}'>
Enter Proposal range
</apex:pageBlockSection>

</apex:outputPanel>

</apex:pageBlock>
</apex:form>
</apex:page>


public class Wizard_3a_Controller
{

Boolean testval = false;

public String getShowSection1()
{
testval= true;
return null;
}

public String getShowSection2()
{
testval= false;
return null;
}

public Boolean getHideshow()
{
return testval;
}
public void setHideshow(boolean s)
{
this.testval = s;
}
}

 
aballardaballard
Your command buttons need to use action=... attribute to invoke an action method.   What you have just generates onclick='null'.   e.g.
Code:
page:

<apex:page controller="Wizard_3a_Controller">
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection title='Rate Information'>
Are there proposed non-standard electronic rates—<br/>
<apex:commandButton action='{!showSection1}' value='Yes' styleClass='btn' rerender='details'></apex:commandButton>
<apex:commandButton action='{!showSection2}' value='No' styleClass='btn'></apex:commandButton>
</apex:pageBlockSection>
<apex:outputPanel id='details'>
<apex:pageBlockSection id ='newData' title='Discount Rates' rendered='{!hideshow}'>
Enter Proposal range
</apex:pageBlockSection>

</apex:outputPanel>

</apex:pageBlock>
</apex:form>
</apex:page>


Controller:
public class Wizard_3a_Controller
{

Boolean testval = false;

public void showSection1()
{
testval= true;
}

public void showSection2()
{
testval= false;
}

public Boolean getHideshow()
{
return testval;
}
}

 
Ron HessRon Hess
ok, this appears to work


Code:
public class Wizard_3a_Controller
{

Boolean testval = false;
public pagereference showSection1() {
setHideshow(true);
return null; }

public pagereference ShowSection2()
{
setHideshow(false);
return null;
}

public Boolean getHideshow()
{
return this.testval;
}
public void setHideshow(boolean s)
{
this.testval = s;
}
}

 
and
Code:
<apex:page controller="Wizard_3a_Controller">
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection title='Rate Information'>
Are there proposed non-standard electronic rates—<br/>
<apex:commandButton action="{!showSection1}" value='Yes' styleClass='btn' rerender='details'></apex:commandButton>
<apex:commandButton action="{!showSection2}" value='No' styleClass='btn'></apex:commandButton>
</apex:pageBlockSection>
<apex:outputPanel id='details'>
<apex:pageBlockSection id ='newData' title='Discount Rates' rendered='{!hideshow}'>
Enter Proposal range
</apex:pageBlockSection>

</apex:outputPanel>

</apex:pageBlock>
</apex:form>
</apex:page>

 
Jina ChetiaJina Chetia
Thanks a lot Ron and  Aballard.. its working :smileyhappy:
raju123raju123

hi,

 

Please check bellow code in which 2 pageblock sections are there. initially only 1st block we can see. if we click on yes second bolck will apear.

 

but 

 

My Problem  when we click on yes second needs to appear and first block needs to Hide.

Please Can any one help me out
public class Wizard_3a_Controller
{

Boolean testval = false;
public pagereference showSection1() {
setHideshow(true);
return null; }

public pagereference ShowSection2()
{
setHideshow(false);
return null;
}

public Boolean getHideshow()
{
return this.testval;
}
public void setHideshow(boolean s)
{
this.testval = s;
}
}
 
and 
Code:
<apex:page controller="Wizard_3a_Controller">
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection title='Rate Information'>
Are there proposed non-standard electronic rates—<br/>
<apex:commandButton action="{!showSection1}" value='Yes' styleClass='btn' rerender='details'></apex:commandButton>
<apex:commandButton action="{!showSection2}" value='No' styleClass='btn'></apex:commandButton>
</apex:pageBlockSection>
<apex:outputPanel id='details'>
<apex:pageBlockSection id ='newData' title='Discount Rates' rendered='{!hideshow}'>
Enter Proposal range
</apex:pageBlockSection>

</apex:outputPanel>

</apex:pageBlock>
</apex:form>
</apex:page>