JSF - Load/insert a different div after an ajax call

I think the topic explain what Im looking for :

template.xhtml

<div class="content">
    <ui:insert name="content_homepage">Box Content Here</ui:insert>
</div>

index.xhtml

<ui:composition template="./template.xhtml">
    <ui:define name="title">
        JSF - The Sinfonet Portal
    </ui:define>

    <ui:define name="login">
        <h:form id="form1" prependId="false">
            <h:outputScript name="jsf.js" library="javax.faces" target="head" />

            <span class="menu_span">Username</span>
            <h:inputText value="#{login.name}" id="name" />

            <span class="menu_span">
                <h:commandButton value="Login" action="#{login.checkLogin}">
                        <f:ajax event="action" execute="name" render="??????"/>
                </h:commandButton>                    
            </span>
        </h:form>
    </ui:define>

    <ui:define name="content_homepage">
        <span class="content_title">Homepage</span>
    </ui:define>

    <ui:define name="content_logged">
        <span class="content_title">OK. You are logged</span>
    </ui:define>
</ui:composition>

Managed bean

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="login")
@RequestScoped
public class Login {
    private String name = "";

    public String getName() { return name; }
    public void setName(String newValue) { name = ne开发者_高级运维wValue; }

    public boolean checkLogin() {
        if(name.length()==0) {
            return true;
        } else {
            return false;
        }
    }   
}  

By using template definition, I insert the content_homepage as first content. After, when i do an ajax call, if the name isnt empty, I will load content_login. Is it possible to do this on JSF?

Cheers

You need to separate the concepts of Facelets (the view/templating technology) and JSF (the component based MVC framework). What you want is not possible with alone Facelets since the Facelets ui tags are solely server side and doesn't emit anything to client side. You need to bring in a JSF component (which generates at end HTML) which can be located by the JS/Ajax in the client side.

template.xhtml

<h:panelGroup layout="block" id="content">
    <ui:insert name="content_homepage">Box Content Here</ui:insert>
</h:panelGroup>

(the layout="block" makes it a <div> instead of <span>)

The button of index.html:

            <h:commandButton value="Login" action="#{login.checkLogin}">
                <f:ajax execute="@form" render=":content" />
            </h:commandButton>

(the :content refers to <h:panelGroup id="content"> which is located in upper : level)

The content template definition of index.html:

<ui:define name="content_homepage">
    <h:panelGroup rendered="#{!login.loggedIn}">
        User is not logged in.
    </h:panelGroup>
    <h:panelGroup rendered="#{login.loggedIn}">
        User is logged in.
    </h:panelGroup>
</ui:define>

Managed bean:

private String name; // Do NOT initialize with empty string! Poor practice.

// ...

public boolean isLoggedIn() { // Boolean getter methods should be prefixed with `is`.
    return name != null; // Do NOT add if/else verbosity for something which already returns boolean! Poor practice.
} 

Further, don't use spans as labels. That's bad HTML semantics. Use <h:outputLabel> (or plain HTML <label>).