Composite component is rendered twice after ajax call - ajax

I have a strange situation with a composite component. I'm using it all over my web application but now I noticed that if I update a form containing my composite component, the component get's rendered twice (at times).
My component (let's say it's called datecc) is defined as follows:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:body>
<composite:interface>
<composite:attribute name="value"/>
<composite:attribute name="shortFormat"/>
<composite:attribute name="style"/>
<composite:attribute name="styleClass"/>
<composite:attribute default="false" name="inputLabel"/>
</composite:interface>
<composite:implementation>
<span id="#{cc.clientId}">
<h:outputText rendered="#{not cc.attrs.inputLabel}" style="#{cc.attrs.style}" styleClass="#{cc.attrs.styleClass}" value="#{cc.attrs.value}">
<f:convertDateTime pattern="#{cc.attrs.shortFormat ? 'dd/MM/yy' : 'dd/MM/yyyy'}" timeZone="#{timezone}"/>
</h:outputText>
<span>asdasdfasdf</span>
<h:inputText disabled="true" rendered="#{cc.attrs.inputLabel}" style="#{cc.attrs.style}" styleClass="#{cc.attrs.styleClass}" value="#{cc.attrs.value}">
<f:convertDateTime pattern="#{cc.attrs.shortFormat ? 'dd/MM/yy' : 'dd/MM/yyyy'}" timeZone="#{timezone}"/>
</h:inputText>
</span>
</composite:implementation>
</h:body>
</html>
The page I'm calling it from is something similar to this:
<h:form id="form">
<p:dataTable id="rowsTable" value="#{myBean.rows}" var="it"
selectionMode="single" selection="#{myBean.selectedRow}" rowKey="#{it.key}"
rowStyleClass="#{myBean.isRed(it) ? 'red' : null}">
<p:ajax event="rowSelect" update=":menuForm :detailForm :contextualMenu"/>
<column>....</column>
<column><mycc:datecc value="#{it.date}" inputLabel="true" /></column>
</p:dataTable>
</h:form>
<h:form id="detailForm>
<!-- this field is rendered twice once I select a row in the above table -->
<mycc:datecc value="#{myBean.selectedRow.date}" inputLabel="true" />
</h:form>
I'm unfortunatelly doing some work on the setSelectedRow method in my bean #Named #ConversationScoped public class MyBean { ... } however I don't think that's causing the problem.

I solved my problem by implementing the following class.
package com.company.faces.cc;
import javax.faces.component.FacesComponent;
import javax.faces.component.NamingContainer;
import javax.faces.component.UIInput;
import javax.faces.component.UINamingContainer;
#FacesComponent("inputDate")
public class Date extends UIInput implements NamingContainer {
#Override
public String getFamily() {
return UINamingContainer.COMPONENT_FAMILY;
}
}
Although I don't really know why this solves the issue since it doesn't add much to the component.

Related

Update child component in JSF (AJAX)

I want update subcomponent with id="two". Everything is working until i put form in another component like h:panelGrid.
<h:panelGroup id="one">
<h:panelGroup id="two">
<h:outputText value="#{testBean.num}"/>
</h:panelGroup>
</h:panelGroup>
<br/>
<h:panelGrid columns="1">
<h:form>
<p:commandButton value="update"
action="#{testBean.inc()}"
update=":one:two"
ajax="true"
/>
</h:form>
</h:panelGrid>
In this case i am getting:
SF1073: java.lang.IllegalArgumentException caught during processing of RENDER_RESPONSE 6 : UIComponent-ClientId=, Message=one
What is wrong ?
PS: update=":one" is works, but i dont want update whole "one" component.
Here is a full code.
xhtml page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:panelGroup id="one">
<h:panelGroup id="two">
<h:outputText value="#{testBean.num}"/>
</h:panelGroup>
</h:panelGroup>
<br/>
<h:panelGrid columns="1" id="table">
<h:form id="form">
<p:commandButton value="update"
action="#{testBean.inc()}"
update=":one:two"
ajax="true"
/>
</h:form>
<!-- .....another components .... -->
</h:panelGrid>
</h:body>
</html>
the bean:
#Named
#ViewScoped
public class TestBean implements Serializable{
private int num;
public void inc() {
System.out.println("inc");
num++;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
This very unhelpful error is caused by your invalid update syntax: :one:two first tries to look up one as a NamingContainer (see Communications in JSF 2.0). If it finds the component, but it isn't a NamingContainer, it throws the exception you're seeing.
To fix this, simply specify the correct update value:
<p:commandButton value="update" action="#{testBean.inc()}"
update=":two" ajax="true" />

Best approach to call a (not) lazy-loaded rich:popupPanel using independent JSF pages

I am trying to insert a popup which has to be lazy-loaded when clicking a h:commandButton. I insert its content via ui:include. However the preRenderView method is not being fired and the PopupPageModel model property is not being initialized so I get a NullPointerException when trying to invoke the business logic method inside PopupPageController.
The idea is having separate Model/Controller beans for both pages involved but I am not sure this is the correct approach, so I would like to know other approaches or the correct way to implement mine.
Thanks in advance.
Invoking page:
<h:commandButton
value="#{msg['jsf.thisScreen.someText']}">
<f:param name="theParameter" value="#{InvokingScreenModel.theParameter}" />
<rich:componentControl target="myPopup" operation="show" />
</h:commandButton>
<rich:popupPanel id="myPopup" modal="true" resizeable="false" autosized="true"
onmaskclick="#{rich:component('myPopup')}.hide()">
<f:facet name="header">
<h:outputText value="#{msg['jsf.anotherScreen.someText']}" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('myPopup')}.hide(); return false;"></h:outputLink>
</f:facet>
<ui:include src="popupPage.xhtml" />
</rich:popupPanel>
Popup page:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:c="http://java.sun.com/jsf/core">
<f:metadata>
<f:viewParam name="theParameter"
value="#{PopupPageModel.theParameter}" />
<f:event type="preRenderView"
listener="#{PopupPageController.initialize}" />
</f:metadata>
<h:form id="someForm">
//Some things here
</h:form>
</ui:composition>
Popup page controller
#Component("PopupPageController")
#Scope("request")
public class PopupPageController {
#Autowired
private PopupPageModel model;
#Autowired
private SomeService service;
public void initialize(){
if (!FacesContext.getCurrentInstance().isPostback()) {
//Change some model properties via service methods
}
}
public void doSomething() {
}
}
I've been struggling with this for several days and I've been unable to find a lazy-loading solution for the popup so I'm posting a solution I managed to do that doesn't include this feature just in case it's useful for someone.
Invoking page extract
<h:form>
<a4j:outputPanel id="stuffDetails">
//Some ajax-rendered tabs and accordions above the button
.....
.....
<a4j:commandButton
value="Open Popup"
actionListener="#{PopupController.someInitializationListenerMethod}"
oncomplete="#{rich:component('thePopup')}.show();"
render="formPopup">
</a4j:commandButton>
</a4j:outputPanel>
</h:form>
<rich:popupPanel id="thePopup" modal="true"
resizeable="false" autosized="true"
onmaskclick="#{rich:component('thePopup')}.hide();">
<f:facet name="header">
<h:outputText value="Some header here" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('thePopup')}.hide(); return false;">
</h:outputLink>
</f:facet>
<h:form id="formPopup">
<ui:include src="popup.xhtml" />
</h:form>
</rich:popupPanel>
popup.xhtml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes" ?>
<html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:c="http://java.sun.com/jsf/core">
//Some controls shown inside the popup
......
......
<a4j:commandButton value="Process data and close popup"
actionListener="#{PopupController.someProcessingMethod}"
render=":stuffDetails :formPopup"
oncomplete="#{rich:component('thePopup')}.hide();" />
<h:commandButton value="Cancel"
onclick="#{rich:component('thePopup')}.hide(); return false;" />
</ui:composition>
</html>
The render=":stuffDetails :formPopup" in popup.xhtml is to avoid the infamous JSF spec issue 790 described by BalusC here and here.
Any suggestions welcome.

Conditionally render h:selectOneMenu and h:inputText by ajax depending on h:selectOneRadio selection

I have a form with 2 radio buttons: "type1" and "type2". If "type1" is chosen, then a dropdown must be displayed. If "type2" is chosen, then a textfield must be displayed.
Here's the view and the controller:
test.xtml
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:form>
<h:selectOneRadio
id="type"
label="Type"
value="#{testBean.type}">
<f:selectItem itemLabel="Type1" itemValue="type1" />
<f:selectItem itemLabel="Type2" itemValue="type2" />
<f:ajax execute="#all" render="selectBox inputBox"/>
</h:selectOneRadio>
<h:selectOneMenu
id="selectBox"
label="Service"
value="#{testBean.service}"
rendered="#{testBean.isType1}"
style="width:285px">
<f:selectItem itemLabel="Medium" itemValue="medium" />
<f:selectItem itemLabel="Basic" itemValue="basic" />
<f:selectItem itemLabel="Premium" itemValue="premium" />
</h:selectOneMenu>
<h:inputText
id="inputBox"
size="50"
value="#{testBean.custom}"
rendered="#{!testBean.isType1}" />
</h:form>
</ui:composition>
TestBean.java
package com.test.backing;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean(name = "testBean")
#SessionScoped
public class TestBean implements Serializable
{
private static final long serialVersionUID = -4337084623546767911L;
private String type = "type1";
private String service;
private String custom;
public Boolean getIsType1()
{
if(type.equals("type1"))
{
System.out.println(type+":true");
return true;
}
else
{
System.out.println(type+":false");
return false;
}
}
public String getType()
{
return type;
}
public void setType(String type)
{
this.type = type;
}
public String getService()
{
return service;
}
public void setService(String service)
{
this.service = service;
}
public String getCustom()
{
return custom;
}
public void setCustom(String custom)
{
this.custom = custom;
}
}
When I start my application, I have the following in my stdout:
type1:true
type1:true
type1:true
type1:true
type1:true
type1:true
However, nothing happens in the UI when I choose another type. How is this caused and how can I solve it?
Try to replace xhtml code with the following code
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
</h:head>
<h:form prependId="false">
<h:selectOneRadio
id="type"
label="Type"
value="#{testBean.type}">
<f:selectItem itemLabel="Type1" itemValue="type1" />
<f:selectItem itemLabel="Type2" itemValue="type2" />
<f:ajax execute="#all" render="selectInputPanel"/>
</h:selectOneRadio>
<h:panelGroup id="selectInputPanel">
<h:selectOneMenu
id="selectBox"
label="Service"
value="#{testBean.service}"
rendered="#{testBean.isType1}"
style="width:285px">
<f:selectItem itemLabel="Medium" itemValue="medium" />
<f:selectItem itemLabel="Basic" itemValue="basic" />
<f:selectItem itemLabel="Premium" itemValue="premium" />
</h:selectOneMenu>
<h:inputText
id="inputBox"
size="50"
value="#{testBean.custom}"
rendered="#{!testBean.isType1}" />
</h:panelGroup>
</h:form></ui:composition>
Main problem in your code is,
Missing h:head to import jsf.js which is required for jsf ajax.
Please wrap your component into a panelGroup as suggested by #BaluC because once the component not rendered (not available on page) then the ajax on it will not work with its id.
And regarding number of time getIsType1() method calling is due to the rendered attribute, for more information check #Baluc's answer here
JSF generates HTML. JS/Ajax works on HTML. JS/Ajax updates HTML elements by finding it in HTML DOM tree by document.getElementById() and replacing its contents based on Ajax response. However, if a JSF component is instructed to not render HTML, then JS/Ajax cannot find it in the HTML DOM tree and thus can't replace anything.
You can only ajax-update the HTML representation of a JSF component which is always rendered. So, wrap them in e.g. a <h:panelGroup>.
<h:selectOneRadio ...>
<f:ajax ... render="selectAndInputBox" />
</h:selectOneRadio>
<h:panelGroup id="selectAndInputBox">
<h:selectOneMenu ... rendered="..." />
<h:inputText ... rendered="..." />
</h:panelGroup>
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
Unrelated to the concrete problem, that getIsType1() method is clumsy. Just do the comparison directly in the view so that you can get rid of it.
<h:selectOneMenu ... rendered="#{testBean.type == 'type1'}" />
<h:inputText ... rendered="#{testBean.type != 'type1'}" />
or perhaps, more matching your initial question,
<h:selectOneMenu ... rendered="#{testBean.type == 'type1'}" />
<h:inputText ... rendered="#{testBean.type == 'type2'}" />

can't call methods from SEAM Component

i have a SEAM 2 application and i have a strange situation. I'm developing with Eclipse Indigo, and i need to create a page with a grid where each row has a button that display a popup window with a list and you can choose one item of the list with a link and the value selected is shown in the row.
So i have this component:
#Name("paramContHome")
#Scope(ScopeType.CONVERSATION)
public class ParamContHome extends KubeDAO<ParametroSistema>{
private static final long serialVersionUID = 1L;
#In
private LoginUser loginUser;
#In(required=false,create=true)
private CuentaContHome cuentaContHome;
public void load(){
try{
setInstance(getEntityManager().find(ParametroSistema.class, prctId));
}catch (Exception e) {
clearInstance();
setInstance(new ParametroSistema());
}
}
public void selCuentaParam(ParametroSistema par) {
setSelParam(par);
cuentaContHome.getCuentasList();
}
public void setCuentaParam(CuentaContable cta) {
selParam.setValorNum(cta.getId().floatValue());
selParam.setSelObj(cta);
}
...
}
That contains the methods that i'm trying to call from xhtml page. This is the xhtml page:
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:p="http://primefaces.prime.com.tr/ui"
template="/layout/templateKu.xhtml">
<ui:define name="body">
<rich:panel>
<f:facet name="header">#{app.paramact_head}</f:facet>
<rich:spacer height="20" />
<h:form id="formA">
<p:growl globalOnly="true" sticky="false" life="3000" />
<p:focus />
<a:queue name="q1" />
<rich:dataTable var="res" value="#{paramContHome.resultList}"
rendered="#{not empty paramContHome.resultList}" rows="10"
align="center" rowClasses="tableInfo1 tableInfo2"
headerClass="tablaHeader" footerClass="tableScroll">
<f:facet name="header">#{app.paramact_list}</f:facet>
<rich:column filterBy="#{res.nombre}" filterEvent="onkeyup">
<f:facet name="header">#{app.paramact_nombre}</f:facet>
<h:outputText value="#{res.nombre}" />
</rich:column>
<rich:column>
<f:facet name="header">#{app.transferencia_valornum}</f:facet>
<h:inputText value="#{res.selObj.nombre}" size="20" >
<a:support event="onblur" ajaxSingle="true" eventsQueue="q1" reRender="_table"/>
</h:inputText>
<a:commandButton ajaxSingle="true"
action="#{paramContHome.selCuentaParam(res)}" reRender="sCta"
onclick="#{rich:component('selCta')}.show();"
styleClass="modifyBtn" value=" " style="width:30px;">
</a:commandButton>
</rich:column>
<f:facet name="footer">
<rich:datascroller id="ds1" renderIfSinglePage="true" />
</f:facet>
</rich:dataTable>
</h:form>
</rich:panel>
<rich:modalPanel id="selCta" width="400" moveable="false" autosized="true" top="50px"
onbeforeshow="activeModal.setActiveModalPanel('selCta');">
<f:facet name="header">#{app.general_lov}</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/kubeImg/close.png" styleClass="closeBtn"
onclick="#{rich:component('selCta')}.hide();" />
</h:panelGroup>
</f:facet>
<s:div id="sCta"><ui:include src="selCta.xhtml" /></s:div>
</rich:modalPanel>
</ui:define>
</ui:composition>
This is the button where i wanna call the method selCuentaParam of component paramContHome:
<rich:column>
<f:facet name="header">#{app.transferencia_valornum}</f:facet>
<h:inputText value="#{res.selObj.nombre}" size="20" >
<a:support event="onblur" ajaxSingle="true" eventsQueue="q1" reRender="_table"/>
</h:inputText>
<a:commandButton ajaxSingle="true"
action="#{paramContHome.selCuentaParam(res)}" reRender="sCta"
onclick="#{rich:component('selCta')}.show();"
styleClass="modifyBtn" value=" " style="width:30px;">
</a:commandButton>
</rich:column>
Inside this method, i call a method from another component, cuentaContHome:
#In(required=false,create=true)
private CuentaContHome cuentaContHome;
...
public void selCuentaParam(ParametroSistema par) {
setSelParam(par);
cuentaContHome.getCuentasList();
}
But when i run the application and enter to the page, and i press the button, it doesn't calle the method selCuentaParam. I've checked this because i put breakpoints inside it and put System.out.println and doesn't invoke it. Do you know why this happens, is something related to component initialization?
Regards.
Well, i found the problem, i think. In my screens i follow a certain pattern: First i have a xhtml where i show a grid of database records with a button to go to a second xhtml wich has a form to create a new record. This button begins a conversation, so in the xhtml that has a form (i call it detail.xhtml) it begins the conversation or joins to existing one. So, i modified the pages.xml of the first xhtml (i call it list.xhtml) in the next way:
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns="http://jboss.com/products/seam/pages"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://jboss.com/products/seam/pages http://jboss.com/products/seam/pages-2.2.xsd">
<action execute="#{paramContHome.getParametrosContables()}" on-postback="false"/>
<begin-conversation propagation="begin" join="true" />
</page>
I used first just <begin-conversation /> and but it gives me this exception begin() called from long-running conversation, try join=true so i added this to begin-conversation and it works!!

JSF dynamic include using Ajax request [duplicate]

This question already has answers here:
How to ajax-refresh dynamic include content by navigation menu? (JSF SPA)
(3 answers)
Closed 7 years ago.
In JSF2, is it possible to change the of value of src of ui:include dynamically using Ajax request (like for example PrimeFaces p:commandButton)?
Thank you.
<h:form>
<h:commandLink value="Display 2" action="#{fTRNav.doNav()}">
<f:setPropertyActionListener target="#{fTRNav.pageName}" value="/disp2.xhtml" />
</h:commandLink>
</h:form>
<ui:include src="#{fTRNav.pageName}"></ui:include>
That's what I have right now. Is it possible to make it Ajax (using p:commandButton)?
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;
#PostConstruct
public 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
#RequestScoped
public 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>

Resources