Panel not rendering on command button click in primefaces - jsf-2

Question

I was playing around with primefaces components, when I stumbled upon this issue...
I have a sample page which contains the following,
<h:form>
<p:panel id="p1">
<p:commandButton value="display" actionListener="#{myTestBean.display}" update="p2"> </p:commandButton>
</p:panel>
<p:panel id="p2" rendered="#{myTestBean.show}">
<p:inputText value="#{myTestBean.val1}" id="t1"></p:inputText>
<p:inputText value="#{myTestBean.val2}" id="t2"></p:inputText>
<p:commandButton value="click me" update="#form" action="#{myTestBean.disply}"></p:commandButton>
</p:panel>
</h:form>
My backing bean contains the following,
public class Testbean implements Serializable {
private String val1;
private String val2;
private boolean show;
//getters and setters for the above...
public void display(){
if(show == false){
setShow(true);
}
}
public void disply(){
System.out.println("I am here");
val1 = "hi";
val2 = "hello";
if(show == false){
setShow(true);
}
}
}
Now, the catch here is, when I click my first button(display) the below panel(p2) gets rendered correctly. But when I click on the second button(click me) the panel gets hidden and also on click of second button it never goes to the backing bean method 'disply()'.
I have used action listener in the second button but again the same behavior. Also, I have given the update = "p2" in the second button, even that didn't yield what I wanted.
Could anyone help me out with this and let me know where and what I am doing wrong?
Thank you.

Answer 1

The bean needs to be placed in the view scope in order to remember all previous (ajax) actions on the same view.
#ManagedBean
#ViewScoped
public class TestBean {
// ...
}
When the bean is placed in the request scope, then the boolean show would be reinitialized to default false and thus the rendered attribute would evaluate false while JSF is looking for the action method to be invoked and hence the action method would be never found and invoked.
See also:
How to choose the right bean scope?
commandButton/commandLink/ajax action/listener method not invoked or input value not updated

Answer 2

When using actionListener="#{myTestBean.display}", the backinbean method should be
public void display(**ActionEvent event**){
if(show == false){
setShow(true);
}
}
and an ActionEvent parameter must be declared.

Answer 3

I surrounded the button as shown below
<h:form>
<h:commandButton styleClass="toggle_btn" action="#{buttonNavBean.show()}" style=" font-family: sans-serif; color: black;" value="Sign In/Sign Up"></h:commandButton>
</h:form>

Answer 4

I faced the same challenge too. I tried to search online but all in vain. But after several trials, I came to figure out that since I was using the commandButton to set the value of the rendered panel, it was not possible to work out of UIForm, Therefore, I surrounded the commandButton with UIForm and it worked correctly as I wanted.