reRender and rendered attribute in visualforce

0

votes

i write a visualforce page with source code

<apex:page controller="MyController1">
<apex:form>
<apex:pageBlock >
<apex:pageBlockSection  id="search">
<apex:commandLink action="{!commandLinkAction}" value="Advance Search"  reRender="thePanel" id="theCommandLink"/>
<apex:outputPanel id="thePanelWrapper">
<apex:outputPanel id="thePanel" rendered="{! rend}" layout="block">My div</apex:outputPanel>
</apex:outputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

and the MyController1 class is

public class MyController1{
public Boolean rend{get;set;}
public PageReference commandLinkAction(){
rend=true;
return null;
}

}

when i click on Advanced Search link nothing happens but i was expecting outputPanel with id "thePanel" should render.why it is not rendering please someone explain??

salesforceapex-codevisualforce

2

votes

In moment that you click on the link the panel not on the page, SF not rendered it.

1

votes

As @Shimshon said, when the HTML code is generated from Visualforce, the Visualforce components marked as rendered="false" are not displayed in the resulting HTML document.

In this case:

<apex:outputPanel id="thePanel" rendered="{! rend}" layout="block">

if you are going to rerender this panel, then you must ensure that the component will be displayed in the HTML code so the rerender action can find it. Since {! rend} is initially set to false in the controller's constructor "thePanel" is never rendered in the page, thus you try to rerender a component that does not exist.

@theGreatDanton 's solution will work because <apex:outputPanel id="thePanelWrapper"> is the container panel that is always rendered:

<apex:commandLink action="{!commandLinkAction}" value="Advance Search"  reRender="thePanelWrapper" id="theCommandLink"/>

and if this panel is pointed by rerender attribute, then "thePanelWrapper" and their child nodes ("thePanel") will be updated.

0

votes

try the below code.

<apex:page controller="MyController1">
<apex:form>
<apex:pageBlock >
<apex:pageBlockSection  id="search">
<apex:commandLink action="{!commandLinkAction}" value="Advance Search"  reRender="thePanelWrapper" id="theCommandLink"/>
<apex:outputPanel id="thePanelWrapper">
<apex:outputPanel id="thePanel" rendered="{! rend}" layout="block">My div</apex:outputPanel>
</apex:outputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

public class MyController1{
   public Boolean rend{get;set;}
   //setting the boolean to false in the constructor
   public MyController1(){
          rend = false;
   }
   public void commandLinkAction(){
      rend=true;
     // return null;
   }

}

Hope this helps!!

reRender and rendered attribute in visualforce

3 Answers