• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Switch rendering of a rich:panel

 
luca gori
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
I want switch visibility of a rich panel using a button. Initially the panel is not visible. When I click the button nothing happens...help please !!!

tks
Luca

This is the JSF code:
<f:view>
<a4j:form id="frm">
<a4j:commandButton value="Switch View" action="#{provaBean.change}" reRender="mypanel"/>
<rich:panel id="mypanel" header="Test Render" style="width: 700px" rendered="#{provaBean.show}">
<h:inputText id="myInput" value="#{provaBean.testo}"/>
</rich:panel>
</a4j:form>
</f:view>

This is the backing bean code (request scope):
public class ProvaBean {
private boolean show=false;

public boolean isShow() {
return show;
}

public void setShow(boolean show) {
this.show = show;
}

private String testo;

public String getTesto() {
return testo;
}

public void setTesto(String testo) {
this.testo = testo;
}

public void change() {
this.show = !this.show;
this.testo = "changed";
}
 
Wei Geng
Greenhorn
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi luca,

I am also a novice on RichFaces. But I think I can answer your question.

The keypoint is that the RichFaces will refresh the page content by Ajax. In other word, the new response from server will first scan the DOM tree. When it finds the mark of component in DOM tree, it will refresh the content of component.

In you case, when the page first time loaded from server to the browser, due to the 'render' attribute of 'mypanel' is 'false', there isn't any corresponding content about 'mypanel' rendered to page. After clicking the button, the 'render' attribute of 'mypanel' is set to 'true'. When the new response sent to browser, the browser failed to find the mark of 'mypanel' in DOM tree. Therefore, no change will be shown on the page.

To solve this problem, the recommended method is to place the component (which attribute is 'false' initially) into a container componet. And try to reRender this component every time.

Since this container will be rendered every time. When the new response sent to browser, the browser will be able to find the 'mypanel' successfully.

Just like following, very simple:


You can also use the <rich:panel> or other container component instead <h:panel>.

I hope it is helpful. Good luck!

 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic