JSF - load / paste another div after ajax call

Question

I think the topic explains what I'm 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> 

Driven 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 = newValue; } public boolean checkLogin() { if(name.length()==0) { return true; } else { return false; } } } 

Using the template definition, I insert content_homepage as the first content. After I make an ajax call, if the name is not empty, I will load the content_login . Is it possible to do this on JSF?

Greetings

Answer 1

You need to separate the concepts of Facelets (view / template technology) and JSF (component-based MVC infrastructure). What you want is not possible with single Facelets, as Facelets ui tags are exclusively server-side and do not produce anything on the client side. You need to add the JSF component (which is generated at the end of the HTML), which can be hosted by client-side JS / Ajax.

template.xhtml

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

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

Button index.html :

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

( :content refers to <h:panelGroup id="content"> , which is at the top level :

Definition of the content template 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. } 

Also, do not use spacing as labels. This is bad HTML semantics. Use <h:outputLabel> (or plain HTML <label> ).