Rendered after ActionEvent

Question

I want that inputText will be rendered on page after click on the button without entire reload of the page. Consider the facelet 1.xhtml with following components:

<h:commandButton id="show" value="Show" actionListener="#{f.rend}"/>
<h:inputText id="usrname" binding="#{f.usrname}" rendered="false"/>

and managed bean

@Named("f")
@RequestScoped
private HtmlInputText usrname;
//getter,setter
public void rend(ActionListener e){
//How this method must be implemented?
}

This is the *n*-th time that I had to remove `[java]` tag from your JSF-related question. Don't you pay attention to the edits made by other users? Can you please stop putting the `[java]` tag in everytime? It only pollutes `[java]` tag with questions not about Java and often only attracts "know-it-better" nitwits who posts nonsense comments/answers while they know nothing about JSF. Some users even downvote because they don't understand anything form what you ask. — BalusC, Nov 19 '13 at 21:32

score 1 · Accepted Answer · edited May 23 '17 at 12:12

You need to send an ajax (partial) request instead of a full request. You can use <f:ajax> inside the command component for this. It has a render attribute taking a spaceseparated collection of client IDs which needs to be updated. Then, the input component's rendered attribute must be a dynamic value expression referring a bean property instead of a hardcoded value of false. E.g. a boolean property. You just have to set that property to true then. You don't and shouldn't need to bind the whole component to the bean. That's poor practice.

All in all, this should do:

<h:commandButton id="show" value="Show" action="#{bean.setShow(true)}">
    <f:ajax render="group" />
</h:commandButton>
<h:panelGroup id="group">
    <h:inputText id="username" rendered="#{bean.show}" />
</h:panelGroup>

with (assuming JSF 2.2, with @ViewScoped for reasons mentioned here)

import javax.inject.Named;
import javax.faces.view.ViewScoped;

@Named
@ViewScoped
public class Bean {

    private boolean show;

    public boolean isShow() {
        return show;
    }

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

}

Rendered after ActionEvent

1 Answers1