Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Lizzie WLizzie W 

Rerender doesn't work on CommandButton

This is a sample. When I click 'hide it', it supposed to hide the text, but nothing happened. Could some one help?

/***************Page**********************/

<apex:page sidebar="false" showChat="false" showHeader="false" controller="TestRenderCtrl">
    <apex:form >
        <apex:outputPanel id="panel1"  rendered="{!isRendered}">
            Panel: it is used for testing render.
        </apex:outputPanel>
        <apex:outputPanel >
            <apex:commandButton value="hide it" action="{!hidePanel}" reRender="panel1" />  
            <apex:commandButton value="show it" action="{!showPanel}" reRender="panel1" />
        </apex:outputPanel>
    </apex:form> 
</apex:page>

/***************Controller*****************/

public class TestRenderCtrl{
  
    public Boolean isRendered {get; set;}
      
    public TestRenderCtrl(){
        isRendered = true;
    }
  
    public PageReference hidePanel(){
        isRendered = false;
        return null;
    }
  
    public PageReference showPanel(){
        isRendered = true;
        return null;
    }
}
Best Answer chosen by Lizzie W
CheyneCheyne
I think you need to wrap the outputPanel with the rendered attribute with another outputPanel; since panel1 does not initially exist, there is nothing for it to re-render when you click the button.

<apex:page sidebar="false" showChat="false" showHeader="false" controller="TestRenderCtrl">
    <apex:form >
        <apex:outputPanel id="panel1" >
          <apex:outputPanel rendered="{!isRendered}">
            Panel: it is used for testing render.
          </apex:outputPanel>
        </apex:outputPanel>
        <apex:outputPanel >
            <apex:commandButton value="hide it" action="{!hidePanel}" reRender="panel1" /> 
            <apex:commandButton value="show it" action="{!showPanel}" reRender="panel1" />
        </apex:outputPanel>
    </apex:form>
</apex:page>

All Answers

CheyneCheyne
I think you need to wrap the outputPanel with the rendered attribute with another outputPanel; since panel1 does not initially exist, there is nothing for it to re-render when you click the button.

<apex:page sidebar="false" showChat="false" showHeader="false" controller="TestRenderCtrl">
    <apex:form >
        <apex:outputPanel id="panel1" >
          <apex:outputPanel rendered="{!isRendered}">
            Panel: it is used for testing render.
          </apex:outputPanel>
        </apex:outputPanel>
        <apex:outputPanel >
            <apex:commandButton value="hide it" action="{!hidePanel}" reRender="panel1" /> 
            <apex:commandButton value="show it" action="{!showPanel}" reRender="panel1" />
        </apex:outputPanel>
    </apex:form>
</apex:page>
This was selected as the best answer
Lizzie WLizzie W
It works, many thanks.
Lizzie WLizzie W
<apex:page sidebar="false" showChat="false" showHeader="false" controller="TestRenderCtrl">
    <apex:form >
        <apex:outputPanel id="panel1"  rendered="{!isRendered}">
            Panel: it is used for testing render.
        </apex:outputPanel>
        <apex:outputPanel >
            <apex:commandButton title="hide it" value="hide it" action="{!hidePanel}"/>
            <apex:commandButton title="show it" value="show it" action="{!showPanel}"/>
        </apex:outputPanel>
    </apex:form>
</apex:page>

// For the same function (show or hide the text via rendered), just coding like this. It's no need to use rerender.