0

How can dynamically show or hide a panel ?

With the given example below, when I click btn-1 then panel-2 shows and panel-1 hides. But when I click btn-2 nothing happens.

ManagedBean

@ManagedBean
@ViewScoped
public class SampleController implements Serializable {
    private Boolean showPanel;

    public void button1() {
        showPanel = Boolean.FALSE;
    }

    public void button2() {
        showPanel = Boolean.TRUE;
    }

    public Boolean showPanel1(){
        return showPanel;
    }

    public Boolean showPanel2(){
        return ! showPanel;
    }
}

XHTML

<h:form id="form">
    <h:panelGroup id="container-panel-1">
          <h:panelGroup id="panel-1" rendered="#{sampleController.showPanel1()}">
              <p:commandButton id="btn-1"
                   actionListener="#{sampleController.button1}" 
                   update=":form:container-panel-1, :form:container-panel-2" />
          </h:panelGroup>
    </h:panelGroup>
    <h:panelGroup id="container-panel-2">
          <h:panelGroup id="panel-2" rendered="#{sampleController.showPanel2()}">
              <p:commandButton id="btn-2"
                   actionListener="#{sampleController.button2}" 
                   update=":form:container-panel-1, :form:container-panel-2" />
          </h:panelGroup>
    </h:panelGroup>
</h:form>

I hope you can help me with this.

Thank you, Bell

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
bell
  • 63
  • 11
  • 2
    The given code throws NPE on `showPanel2()`. Once you fix that by using `boolean` instead of `Boolean`, it works for me. The cause of your problem is not visible in the information provided so far. My best guess would be that you imported `@ViewScoped` from the wrong package causing the JSF managed bean scope to default to `@RequestScoped`, on which then point #5 of http://stackoverflow.com/questions/2118656/commandlink-commandbutton-ajax-backing-bean-action-listener-method-not-invoked/2120183#2120183 would apply. – BalusC Apr 09 '15 at 14:14
  • Hello BalusC, I change `Boolean` to `boolean` and checked the package I used it was `import javax.faces.bean.ViewScoped;`. Still nothing happens when I click button 2. Where did you see the Exception? I do not see any exception in my console. Thank you – bell Apr 11 '15 at 01:11
  • If you're not seeing an exception and are still having the described problem, then you've likely a bigger problem: a seriously messed up dev environment and/or project. I'd just restart from scratch. – BalusC Apr 13 '15 at 06:49

1 Answers1

0

This code is works:

View:

<h:form id="form">

    <h:panelGroup id="container-panel-1">
        <h:panelGroup id="panel-1" rendered="#{sampleController.showPanel1()}">
            <p:commandButton id="btn-1" value="btn1"
               actionListener="#{sampleController.button1}" 
               update=":form:container-panel-1, :form:container-panel-2" />
        </h:panelGroup>
    </h:panelGroup>

    <h:panelGroup id="container-panel-2">
        <h:panelGroup id="panel-2" rendered="#{sampleController.showPanel2()}">
            <p:commandButton id="btn-2" value="btn2"
               actionListener="#{sampleController.button2}" 
               update=":form:container-panel-1, :form:container-panel-2" />
        </h:panelGroup>
    </h:panelGroup>
</h:form>

Bean:

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class SampleController implements Serializable {

    private boolean showPanel;

    public void button1() {
        showPanel = false;
    }

    public void button2() {
        showPanel = true;
    }

    public boolean showPanel1(){
        return showPanel;
    }

    public boolean showPanel2(){
        return ! showPanel;
    }
}
0x5a4d
  • 750
  • 1
  • 7
  • 21