Trying to use an ajax request to render a label without refreshing the entire page. So far every time I click the command button the whole page refreshes still and I can't seem to figure out what I am doing wrong.
Search By Title..
<h:commandButton class="addButton"
id="checkStatusButton"
value ="Check Status"
action = "#{itemWeb.findItem}">
<f:ajax execute="checkStatusForm"
event="click"
render="statusLabel"/>
</h:commandButton>
<h:outputText id="statusLabel"
value="#{itemWeb.foundItem.status}">
</h:outputText>
The page refresh because you do not use JSF Standard tags(h:head, h:body).
Thus, you should change the index.xhtml to below example.
<!--
Index.html setup
Holds the form for input data
-->
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<link href='http://fonts.googleapis.com/css?family=Roboto'
rel='stylesheet' type='text/css'></link>
<link href='resources/css/main.css'
rel='stylesheet' type='text/css'></link>
<title>
<ui:insert name="title"
Library Management System
</ui:insert>
</title>
<!--
Quick style setup..
-->
</h:head>
<h:body>
<h:form id="checkStatusForm">
<div class="group">
<h:inputText id="searchCheckInput"
value="#{itemWeb.searchString}">
</h:inputText>
<label>Search By Title..</label>
<span class="highlight"></span>
<span class="bar"></span>
</div>
<h:commandButton class="addButton"
id="checkStatusButton"
value ="Check Status"
action ="#{itemWeb.findItem}">
<f:ajax execute="checkStatusForm"
event="action"
render="statusLabel"/>
</h:commandButton>
<h:outputText id="statusLabel"
value ="#{itemWeb.foundItem.status}">
</h:outputText>
</h:form>
</h:body>
</html>
See also: Adding HTML Head and Body Tags
Try to process only the desired field rather than the whole form, in the execute attribute:
<h:commandButton class="addButton" id="checkStatusButton" value ="Check Status" action = "#{itemWeb.findItem}">
<f:ajax execute="searchCheckInput" event="click" render="statusLabel"/>
</h:commandButton>
You need to use event="action" instead of event="click". The event="action" is namely the default event the is listening on when nested in an h:commandButton component.
An example is shown below.
xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>ajax-call</title>
</f:facet>
</h:head>
<h:body>
<h:form id="checkStatusForm">
<h:inputText id="searchCheckInput"
value="#{itemWeb.searchString}">
</h:inputText>
<label>Search By Title..</label>
<br/>
<h:commandButton class="addButton"
id="checkStatusButtonListener"
value ="Check Status (Listener)"
actionListener="#{itemWeb.findItemListener}">
<f:ajax execute="checkStatusForm"
event="action"
render="statusLabel"/>
</h:commandButton>
<h:commandButton class="addButton"
id="checkStatusButton"
value ="Check Status"
action="#{itemWeb.findItem}">
<f:ajax execute="checkStatusForm"
event="action"
render="statusLabel"/>
</h:commandButton>
<br/>
<h:outputText id="statusLabel"
value ="#{itemWeb.foundItem.status}">
</h:outputText>
</h:form>
</h:body>
</f:view>
</html>
managedbean
package com.wittakarn.view;
import com.wittakarn.model.Item;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
/**
*
* #author Wittakarn
*/
#ViewScoped
#ManagedBean(name = "itemWeb")
public class ItemWeb implements Serializable{
private String searchString;
private Item foundItem;
public ItemWeb(){
foundItem = new Item();
}
public String getSearchString() {
return searchString;
}
public void setSearchString(String searchString) {
this.searchString = searchString;
}
public Item getFoundItem() {
return foundItem;
}
public void setFoundItem(Item foundItem) {
this.foundItem = foundItem;
}
public void findItem(){
foundItem.setStatus("status A");
}
public void findItemListener(ActionEvent event){
foundItem.setStatus("status B");
}
}
domain
package com.wittakarn.model;
import java.io.Serializable;
/**
*
* #author Wittakarn
*/
public class Item implements Serializable{
private String status;
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
}
Related
Yesterday I created a really simple JSF project to practice how to render a dynamic menu with Ajax request.
The addition method works pretty well, but in case I switch to another tab the result is not calculated and displayed in the page.
I debugged the code for hours, but till yet I haven't found the root cause. Do you have any idea what the problem can be?
Web Pages
index.xhtml:
<?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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Mathematics</title>
</h:head>
<h:body>
<h:panelGroup id="menu">
<h:form>
<f:ajax render="page">
<h:commandButton value="Addition" action="#{menuMB.setPage('addition')}"></h:commandButton>
<h:commandButton value="Subtraction" action="#{menuMB.setPage('subtraction')}"></h:commandButton>
<h:commandButton value="Multiplication" action="#{menuMB.setPage('multiplication')}"></h:commandButton>
<h:commandButton value="Division" action="#{menuMB.setPage('division')}"></h:commandButton>
</f:ajax>
</h:form>
</h:panelGroup>
<h:panelGroup id="page">
<ui:include src="/WEB-INF/includes/#{menuMB.page}.xhtml"/>
</h:panelGroup>
</h:body>
</html>
addition.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:panelGroup id="header">
<h1>Addition</h1>
</h:panelGroup>
<h:panelGroup id="content">
<h:form id="addition">
<h:outputLabel for="number1" value="Number1:"/>
<h:inputText id="number1" value="#{mathMB.number1}">
<f:ajax event="keyup" listener="#{mathMB.addition}" execute="number1 number2" render="result"/>
</h:inputText>
<h:outputLabel for="number2" value="Number2:"/>
<h:inputText id="number2" value="#{mathMB.number2}">
<f:ajax event="keyup" listener="#{mathMB.addition}" execute="number1 number2" render="result"/>
</h:inputText>
<h:outputLabel for="result" value="Result:"/>
<h:outputText id="result" value="#{mathMB.result}"/>
</h:form>
</h:panelGroup>
All other xhtml pages (division, multiplication, subtraction) are the same as above, only the addition method is changed with the proper one.
Managed Beans
MathMB
#ManagedBean
#RequestScoped
public class MathMB {
private Integer number1;
private Integer number2;
private Integer result;
public void addition() {
if (number1 == null || number2 == null) {
return;
}
result = number1 + number2;
}
subtraction...
multiplication...
division...
//getters + setters
}
MenuMB
#ManagedBean
#ViewScoped
public class MenuMB implements Serializable {
private String page;
#PostConstruct
public void init() {
page = "addition";
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
Thanks a lot for any tips!
You need to put the <f:ajax> tag inside the commandbuttons, not the other way round.
<h:commandButton value="Addition" action="#{menuMB.setPage('addition')}">
<f:ajax render="page"/>
</h:commandButton>
<h:commandButton value="Subtraction" action="#{menuMB.setPage('subtraction')}">
<f:ajax render="page"/>
</h:commandButton>
...
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" />
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'}" />
If a commandButton with ajax support used in een .xhtml without facelets templates, the ajax listener has to be an attribute of the commandButton-tag. If used in conjunction with a template, the listener has to be an attribute of the ajax-tag. I needed some time to figure this out so if this is correct and a normal behavior, be warned.
The viewscoped bean
#ManagedBean
#ViewScoped
public class Test implements Serializable {
private static final long serialVersionUID = 123456L;
private static int i = 0;
private int counter;
private String test = "test ";
#PostConstruct
public void test() {
System.out.println(".......... PostConstruct");
i++;
}
public String getTest() {
return test + i;
}
public String action() {
counter++;
System.out.println(".......... action() " + counter);
return "";
}
public void listener() {
counter++;
System.out.println(".......... listener() " + counter);
}
public void ajaxListener(AjaxBehaviorEvent actionEvent) {
System.out.println(".......... ajaxListener() - " +
"AjaxBehaviorEvent: " + actionEvent);
}
public void ajax() {
System.out.println(".......... ajax() - not using Facelets " +
counter);
}
public void ajaxList2(ActionEvent actionEvent) {
System.out.println(".......... ajaxList2() - ActionEvent" +
actionEvent);
}
public int getCounter() {
return counter;
}
}
the first 2 buttons work in both pages (with and without using facelets). The other buttons don't see the buttons value attribute.
the .xhtml using facelets
<ui:composition 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.prime.com.tr/ui"
template="/WEB-INF/templates/test.xhtml">
<ui:define name="ui_content">
#{test.test}
<h:form id="frm">
<h:commandButton value="testAction" action="#{test.action}"/>
<h:commandButton value="testListener" actionListener="#{test.listener}"/>
<h:commandButton value="Ajax - works ONLY using Facelets" immediate="true" >
<f:ajax event="click" execute="#form" render=":grp2" listener="#{test.ajaxListener}" />
</h:commandButton>
<h:commandButton value="testAjax - works ONLY without using Facelets" immediate="true" action="#{test.ajax}" >
<f:ajax event="click" execute="#form" render=":grp2"/>
</h:commandButton>
<h:commandButton value="testAjax - actionListener works ONLY without using Facelets"
immediate="true" actionListener="#{test.ajaxList2}" >
<f:ajax event="click" execute="#form" render=":grp2"/>
</h:commandButton>
</h:form>
<h:panelGroup id="grp1" rendered="#{test.counter > 2}">
1st group: #{test.counter}
</h:panelGroup><br />
<h:panelGroup id="grp2" rendered="#{test.counter > 7}">
2de group: #{test.counter}
</h:panelGroup>
the .xhtml without facelets
<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:p="http://primefaces.prime.com.tr/ui">
#{test.test}
<h:form id="frm">
<h:commandButton value="testAction" action="#{test.action}"/>
<h:commandButton value="testListener" actionListener="#{test.listener}"/>
<h:commandButton value="Ajax - works ONLY using Facelets" immediate="true" >
<f:ajax event="click" execute="#form" render=":grp2" listener="#{test.ajaxListener}" />
</h:commandButton>
<h:commandButton value="testAjax - action works ONLY without using Facelets" immediate="true" action="#{test.ajax}" >
<f:ajax event="click" execute="#form" render=":grp2"/>
</h:commandButton>
<h:commandButton value="testAjax - actionListener works ONLY without using Facelets" immediate="true" actionListener="#{test.ajaxList2}" >
<f:ajax event="click" execute="#form" render=":grp2"/>
</h:commandButton>
</h:form>
<h:panelGroup id="grp1" rendered="#{test.counter > 2}">
1st group: #{test.counter}
</h:panelGroup><br />
<h:panelGroup id="grp2" rendered="#{test.counter > 7}">
2nd group: #{test.counter}
</h:panelGroup>
</html>
the template file
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>test</title>
</h:head>
<h:body>
<f:view>
<div id="page">
<ui:insert name="ui_header">header</ui:insert>
<ui:insert name="ui_subnav"/>
<div id="content">
<ui:insert name="ui_content"/>
</div>
<ui:insert name="ui_footer" />
</div>
</f:view>
</h:body>
</html>
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>