JSF dynamic include using Ajax request [duplicate]
The JSTL tags as proposed in the other answer are not necessary and it is not nicely reuseable.
Here's a basic example using pure JSF (assuming that you runs Servlet 3.0 / EL 2.2, otherwise you indeed need to use <f:setPropertyActionListener> like as in your question):
<h:form> <f:ajax render=":include"> <h:commandLink value="page1" action="#{bean.setPage('page1')}" /> <h:commandLink value="page2" action="#{bean.setPage('page2')}" /> <h:commandLink value="page3" action="#{bean.setPage('page3')}" /> </f:ajax></h:form><h:panelGroup id="include"> <ui:include src="#{bean.page}.xhtml" /></h:panelGroup>with
private String page;@PostConstructpublic void init() { this.page = "page1"; // Ensure that default is been set.}// Getter + setter.
here is how I render subcontent dynamically using MnagedBean. First I set page in the center (that will be changed by menu triggers) with private String name="/main_pages/mainpage.xhtml", then each time submenu is clicked the HelloBean resets "name" and contents is updated by update=":content" - then new name is retrieved from Bean:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"> <h:head> <f:facet name="first"> <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/> </f:facet> </h:head> <h:body> <p:layout fullPage="true"> <p:layoutUnit position="north" size="150" resizable="true" closable="true" collapsible="true"> <h1>Madeline<br>shop</br></h1> </p:layoutUnit> <p:layoutUnit position="south" size="100" closable="true" collapsible="true"> Zapraszamy do odwiedzania naszego biura! </p:layoutUnit> <p:layoutUnit position="west" size="175" header="Menu" collapsible="true"> <h:form> <p:menu> <f:ajax render=":content"> <p:menuitem value="O naszej agencji" action="#{helloBean.setName('/main_pages/onas.xhtml')}" update=":content" /> <p:menuitem value="Ubezpieczenia pojazdów" action="#{helloBean.setName('/main_pages/ubpoj.xhtml')}" update=":content" /> <p:menuitem value="Ubezpieczenia majątkowe" action="#{helloBean.setName('/main_pages/ubmaj.xhtml')}" update=":content" /> <p:menuitem value="Ubezpieczenia na życie" action="#{helloBean.setName('/main_pages/ubnaz.xhtml')}" update=":content" /> <p:menuitem value="Zapytaj" action="#{helloBean.setName('/main_pages/zapytaj.xhtml')}" update=":content" /> <p:menuitem value="Kontakt" action="#{helloBean.setName('/main_pages/kontakt.xhtml')}" update=":content" /> </f:ajax> </p:menu> </h:form> </p:layoutUnit> <p:layoutUnit position="center"> <br></br><br></br> <p:panel id="content"> <ui:include src="#{helloBean.name}" /> </p:panel> </p:layoutUnit> </p:layout> </h:body></html>my ManagedBean:
/* * To change this template, choose Tools | Templates * and open the template in the editor. */import javax.faces.bean.ManagedBean;import javax.faces.bean.RequestScoped;import java.io.Serializable;/** * * @author root */@ManagedBean@RequestScopedpublic class HelloBean implements Serializable { /** * Creates a new instance of HelloBean */ private static final long serialVersionUID = 1L; private String name="/main_pages/mainpage.xhtml"; public String getName() { return name; } public void setName(String name) { this.name = name; }}
You need to use the <c:if test="condition"> tag around the ui:include and then when the ajax button is clicked, the panel that holds the ui:include is refreshed.
Example:
First make sure that the jstl core taglib is included by inserting the following namespace in the document:
<html xmlns:c="http://java.sun.com/jsp/jstl/core>"
Then, you can use the <c:if> tag as follows :
<c:if test="#{!logBean.loggedIn}"> <ui:include src="loginpage.xhtml" /></c:if><c:if test="#{logBean.loggedIn}"> <ui:include src="home.xhtml" /></c:if>