JSF Hide and show

Question

I am new to JSF as well as stack overflow, I want to hide and show the components according to the button click. If button clicked then component should be visible and next time it should be invisible and so on. I tried below program

My jsg page

       <p:commandButton value="submit" action="#{exampleBean.hideOrShow}"
                        update=":test" />
       <h:inputText value="#{exampleBean.hidden}"/>
       <h:inputText value="#{exampleBean.i}"/>
       <h:panelGroup layout="block" rendered="#{exampleBean.hidden}">
            <div>

                Hello,<h:inputText value="hi"/>
                testing,<h:inputText />
                addr:<h:inputText/>
                </div>

        </h:panelGroup> 
   </h:form>

and

My bean

public void hideOrShow(){

 if (!hidden)
 {
    i++; 
    hidden=true;
 }
 else
 {
    i++; 
    hidden=false;
 }





   }
/**
 * @return the hidden
 */
public boolean isHidden() {
    return hidden;
}

/**
 * @param hidden the hidden to set
 */
public void setHidden(boolean hidden) {
    this.hidden = hidden;
}

/**
 * @return the i
 */
public int getI() {
    return i;
}

/**
 * @param i the i to set
 */
public void setI(int i) {
    this.i = i;
}
}

NOTE:for first two click it working properly then it is not working.

Thanks in Advance

I can't see the component with `id="test"` you are trying to update with your commandButton. — LarsBauer, Jun 10 '14 at 11:30

score 3 · Answer 1 · answered Jun 10 '14 at 12:59

You can try accomplishing using AJAX instead of form submit. You can use f:ajax and change toggle the member variable hidden value and use render attribute to update the panelGroup

Here is something you could try

<p:commandButton value="submit">
  <f:ajax listener="#{exampleBean.hideOrShow}" event="click" render="panel1"></f:ajax>
</p:commandButton>

And add a 'id' attribute in your panelGroup

<h:panelGroup layout="block" rendered="#{exampleBean.hidden}" id="panel1">
            <div>

                Hello,<h:inputText value="hi"/>
                testing,<h:inputText />
                addr:<h:inputText/>
                </div>
</h:panelGroup>

Hope it helps!

Note: Since the start of your form tag not visible, just be aware that if you have id for your <h:form> tag, then you need to append it in render attribute

Thanks, but if user gives the value to respective textbox and before submit the user hide it and then show, the value which entered should display but now its not displaying.Please help for this issue — user3725627, Jun 11 '14 at 05:38

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

The 'update' attribute referes to the id on your page, so you have to declare it. Remember that you can not update elements that have 'rendered' attribute. More info here

Also consider using BooleanCheckBox

edited May 23 '17 at 12:05

Community

1
1

answered Jun 10 '14 at 12:39

Szarpul

1,531
11
21

JSF Hide and show

2 Answers2