How to Display / Hide jsf components

Question

In one of my JSF application, I have header part at the top contains selectOneMenu, and the content part at the bottom which display say, Filter components. By default the application display first selectOneMenu data at the top and corresponding Filter information at the bottom. If the user selects different selectOneMenu data, corresponding Filter information should be loaded on bottom content part.

Filter component has CommandButton and user fills Filter information. On click of the button, and the Filter is approved, the application should load another component - Report.xhtml in place of Filter component. That is Filter component should be replaced by Report on bottom content part.

Click on selectOneMenu item should repeat the process. That is display Filter screen and so on.

Problem area 1. Not able to display Filter form and hide Report form on content part 2. Backing bean of Filter - commandButton OK should return value. Depending on outcome, Report should be displayed in place of Filter.

I am not sure the design is accurate, if this is not going to work as intended, please suggest and your valuable answers will be appreciated. I would like to keep the application ajax based and I do not want to reload entire page on button event.

GDK

<h:form id="form1">    
<h:selectOneMenu value="#{states.stateName}">
  <f:selectItems value="#{states.stateChoices}"/>
  <f:ajax render=":Filter"/>
</h:selectOneMenu>
</h:form>
  <h:form id="Filter">
      <div id="content">            
       <h:panelGroup id="one" rendered="Need a condition from form1 to display this">
            #{states.stateName}
            <br/>Report
            <h:inputText id="report" value="#{Counties.report}" style="width:150px"/>
            <h:commandButton id="OK" value="OK" actionListener="#{Counties.getReports}">
            <f:param name="CatName" value="Dekalb" />               
            </h:commandButton>                 
        </h:panelGroup>           
      </div>
  </h:form>
  <h:form id="Report">
      <div id="content">
        <h:panelGroup id="two" rendered="#{should be rendered on acceptance from OK command button}">
             <ui:include src="Report.xhtml"/>
        </h:panelGroup>
          </div>
  </h:form>

BalusC · Accepted Answer · 2011-01-20 18:43:23Z

9

Here's a minimum example (I was also so kind to sanitize the naming to comply the standards):

<h:form>
  <h:selectOneMenu value="#{states.stateName}">
    <f:selectItems value="#{states.stateChoices}" />
    <f:ajax render=":filter" />
  </h:selectOneMenu>
</h:form>
<h:panelGroup id="filter">
  <h:panelGroup rendered="#{not empty states.stateName}">
    <h:form rendered="#{not counties.accepted}">
      <h:inputText value="#{counties.report}" />
      <h:commandButton value="OK" action="#{counties.viewReport}">
        <f:ajax execute="@form" render=":filter" />
      </h:commandButton>
    </h:form>
    <h:form rendered="#{counties.accepted}">
      <ui:include src="report.xhtml"/>
    </h:form>
  </h:panelGroup>
</h:panelGroup>

Where Counties managed bean has a new boolean property accepted:

@ManagedBean
@ViewScoped
public class Counties {

    private boolean accepted;

    public void viewReport() {
        if (some condition) {
            accepted = true;
        }
    }

    public boolean isAccepted() {
        return accepted;
    }

}

answered Jan 20, 2011 at 18:43

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GDK Over a year ago

Hello BalusC, Thank you so much. It really solved my problem. I really appreciate your fast response. (After displaying report.xhtml on content, click on selectOneMenu item should display Filter again. Method action="" in <f:selectItems/> did not solved the the issue, since it did not reset 'accepted' to false in a method. So I introduced a button next to selectOneMenu component. This method serving the purpose) GDK

GDK Over a year ago

Hello BalusC, This code (your) works for very first iteration. Click on Selectmenu item will display inputText and OK button. For second time onwards click on OK button will not call #{counties.viewReport} function. Click once again on OK button will call #{counties.viewReport} function. That means it requires double-click on OK button to activate. Could you please explain this behavior ? GDK

BalusC Over a year ago

When the button press fails, then it can mean that either stateName is empty or accepted is false during the particular request. The action namely won't be invoked when the rendered attribute of the button or one of its parents evaluates false during apply request values phase. This should however work fine as long as your bean is view scoped. Aren't you programmatically resetting any of them afterwards?

GDK Over a year ago

Re-arranged the code little bit. Then it worked. Changed to <form><panelGroup>..... </panelGroup></form>. Your basic idea helped me a lot!!! Thanks.

Collectives™ on Stack Overflow

How to Display / Hide jsf components

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related