rendering <h:panelGroup> by ajax in jsf

Question

I've got this piece of code, which doesn't do exactly what I thought. I try to set property by Ajax and then re-render one component. My .xhtml looks like this

    <h:form>
        <h:commandButton value="Render!" >
            <f:ajax render=":result" listener="#{eFindUser.findUser}" />
        </h:commandButton>

    </h:form>

    <h:panelGroup id="result" layout="block" rendered="#{eFindUser.responseRendered}" >
        This is some text that is supposed to be rendered later
    </h:panelGroup>

the backing bean looks like this

@Named(value = "eFindUser")
@ViewScoped
public class EFindUserManagedBean implements Serializable{
    private boolean responseRendered = false;
    /**
     * Creates a new instance of EFindUserManagedBean
     */

    public EFindUserManagedBean() {
    }

    public void findUser(AjaxBehaviorEvent abe) {
        responseRendered = !responseRendered;
        System.out.println("finding..... ("+ responseRendered+")" + this);
    }
    public boolean isResponseRendered() {
        return responseRendered;
    }

    public void setResponseRendered(boolean responseRendered) {
        this.responseRendered = responseRendered;
    }       
}

When I re-click the button, the property is not changed. There is a message in serverlog, which says

INFO: finding..... (true)backingbeans.EFindUserManagedBean@5736b751
INFO: finding..... (true)backingbeans.EFindUserManagedBean@23959d6f

Clearly there is some issue with the managed bean as it is created every time there is a request even if it should be view-scoped.

What should I change so the panelgroup(id:"result") could change it's visibility? No richfaces or any other technology allowed.

Thank you very much for your answers

Answer 1

You can't render dynamically a JSF component that is not rendered all time. The object must exist in the DOM client side. When using rendered="false", the output is not generated server side.

Change your code like this :

<h:form>
    <h:commandButton value="Render!" >
        <f:ajax render=":result" listener="#{eFindUser.findUser}" />
    </h:commandButton>

</h:form>

<h:panelGroup id="result">
    <h:panelGroup layout="block" rendered="#{eFindUser.responseRendered}" >
        This is some text that is supposed to be rendered later
    </h:panelGroup>
</h:panelGroup>

With that, the DOM will always contain something with the id="result".

Answer 2

This works for me:

<ui:composition>
<h:form id="mainForm">
        <h:commandButton value="Render!" action="#{eFindUser.findUser}">
            <f:ajax event="action"  render=":result" />
        </h:commandButton>
</h:form>

    <h:panelGroup id="result" layout="block" rendered="#{eFindUser.responseRendered}" >
        This is some text that is supposed to be rendered later
    </h:panelGroup>

</ui:composition>

Bean:

@ManagedBean
@ViewScoped
public class EFindUser implements Serializable{
    private static final long serialVersionUID = -7106162864352727534L;
    private boolean responseRendered = false;

    public EFindUser() {
    }

    public void findUser() {
        responseRendered = !responseRendered;
        System.out.println("finding..... ("+ responseRendered+")" + this);
    }
    public boolean isResponseRendered() {
        return responseRendered;
    }

    public void setResponseRendered(boolean responseRendered) {
        this.responseRendered = responseRendered;
    }       
}

Take a look on JSF 2.0 + Ajax Hello World Example