Required fields within a p:tabView - validation

I have a jsf/primefaces page, with a tabView, that does not work as I would expect it to.
If I make a selection on tab 1, then move to tab 2 and save, it works fine. If I stay on tab 2 and save a second time, it displays the required message for the required field on the first tab.
If I return to the first tab, it is filled in, as it should be. If I press Save again now, on the first tab, it works again.
Why does jsf/primefaces think this field is not filled in?
Page:
<!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"
xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
<div style="height: 50px;">
<p:messages id="messages" autoUpdate="true" showDetail="true" closable="true" />
</div>
<h:form id="form">
<p:tabView id="tabs" dynamic="true">
<p:tab id="tab1" title="Tab 1">
<h:outputLabel value="Field 1" />
<h:selectOneMenu required="true" requiredMessage="Must fill in field 1 selection">
<f:selectItem itemLabel="Select..." itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="1" itemValue="1" />
</h:selectOneMenu>
<br/>
</p:tab>
<p:tab id="tab2" title="Tab 2">
<h:outputLabel value="Field 2" />
<p:inputText required="false" />
<br/>
</p:tab>
</p:tabView>
<p:commandButton value="Save" ajax="true" action="#{tabBean.action}" update="form"
oncomplete="setTimeout(function(){$('[id$=messages]').fadeOut()},'500')" />
</h:form>
</h:body>
</html>
Bean:
#ViewScoped
#ManagedBean(name = "tabBean")
public class TabBean implements Serializable {
private static final long serialVersionUID = 1L;
public TabBean() { }
#PostConstruct
public void init(){ }
public void action() {
// do the save, if validation doesn't fail first
addJsfMessage(FacesMessage.SEVERITY_INFO, "OK", "no prob");
}
private void addJsfMessage(Severity severity, String summary, String detail) {
FacesMessage msg = new FacesMessage(severity, summary, detail);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
While creating this sample, I found that either of the following changes got rid of the error, but neither is desirable:
turning off dynamic loading (the primefaces documentation says in dynamic mode, only the active tab contents
are rendered and when an inactive tab header is selected, content is loaded with ajax, which I assumed to mean on the first load but it seems to not just hide already-loaded tabs, but not render them at all)
replacing the <h:selectOneMenu ... /> with: <h:inputText required="true" requiredMessage="Must fill in field 1 text" />

It's caused by the combination of <p:tabView dynamic="true"> and <p:commandButton update="form">.
When (re)rendered, a dynamic tabview only contains the currently active tab, not others. Only when you change the tab, then it will be loaded into the HTML DOM tree asynchronously. Now, you're on submit updating the entire form, including the dynamic tabview, so it re-renders with only the currently active tab reloaded. In your particular case, the first tab doesn't exist in the HTML DOM tree at all and therefore nothing can be sent to the server side.
Try being more specific in <p:commandButton update>. Specify only the components which really need to be updated, not the entire form with the dynamic tabview.

Related

How to go to a new JSF page from a PrimeFaces commandbutton enabled from ajax

I have created a UI with below code.
<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>Zip Files loading</title>
<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body styleClass="bImage">
<center>
<b><font color="Yellow" size="36px"> Welcome</font> </b>
<br/><br/><br/><br/><br/><br/>
<p:graphicImage library="images" name="filetrans.gif" id="img" style="display: block"></p:graphicImage>
<br/><br/><br/><br/>
<h:form>
<p:growl id="growl" />
<p:commandButton value="Upload zip files" type="button" onclick="PF('pbAjax').start();
PF('startButton2').disable();
PF('cancelButton').enable();
show(PF('img'));" widgetVar="startButton2" />
   
<p:commandButton disabled="true" value="Cancel" widgetVar="cancelButton" actionListener="#{progressBarView.cancel}" oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();PF('cancelButton').disable();" />
<br /><br />
<p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress}" labelTemplate="{value}%" styleClass="animated" global="false" style="width:400px">
<p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl" oncomplete="PF('startButton2').enable(); PF('btnReport').enable();hide(PF('img'));"/>
</p:progressBar>
<br/><br/><br/><br/>
<p:commandButton disabled="true" widgetVar="btnReport" value="View Report" action="Report"/>
</h:form>
</center>
<script type="text/javascript">
function show(id) {
var element = document.getElementById(id);
element.style.display = 'none';
}
function hide(id) {
var element = document.getElementById(id);
element.style.display = 'block';
}
</script>
</h:body>
In the above code, I want to go to the next JSF page Report.xhtml on click of button View Report (the last button). This button is initially disabled and when the progress bar is completed then it is enabled.
I try clicking on the button to the next page but I'm unable to.
On the other hand, if I don't control the disability of the button from ajax(i.e do not enable and disable it) I'm able to go to the next JSF page easily.
Your View Report command button is disabled by default (as you used disabled=true), enabling it form Javascript using PF('btnReport').enable() will only make the button change CSS and make it look like enabled, but in fact your button is disabled.
To Make this work, create a variable at your managed bean.Like:
boolean disableReportBtn = true;
public void onComplete(){
//your existing logic
disableReportBtn = false;
}
And at you XHTML:
<p:commandButton id="reportBtnId" disabled="#{progressBarView.disableReportBtn}" widgetVar="btnReport" value="View Report" action="Report"/>
Update the button after progress bar complete:
<p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress}" labelTemplate="{value}%" styleClass="animated" global="false" style="width:400px">
<p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl reportBtnId" oncomplete="PF('startButton2').enable();hide(PF('img'));"/>
</p:progressBar>

Why does JSF/AJAX skip phases?

I have page with an initial search/h:datatable on top. It renders well and displays all the text units (tokens) which are available.
Leading each row of the search results with a button "view". This button rerenders the panel group textUnitGroup, which holds the details of this token. Now, that works just fine. I can click all the token's view button and the area is refreshed WITHOUT a page reload. With the input fields of that panel group (form in embeded) I can also persist new tokens. Works, too.
However, if I load token details into that detail form (form is rendered again), and I press the "save text" button, JSF phase 2, 3, 4 and 5 are skipped (which did not happen, when I save a new token and the "view" button has NOT been clicked before).
12:31:44,174 INFO [org.exadel.helper] (default task-22) L:54 BEFORE RESTORE_VIEW 1
12:31:44,180 INFO [org.exadel.helper] (default task-22) L:67 AFTER RESTORE_VIEW 1
12:31:44,181 INFO [org.exadel.helper] (default task-22) L:54 BEFORE RENDER_RESPONSE 6
12:31:44,257 INFO [org.exadel.helper] (default task-22) L:67 AFTER RENDER_RESPONSE 6
Somewhat changes when re-rendering the details form resp. panel group. But I don't understand why. There is NO error in the log. But it is certainly the cause of the JSF phase-skipping (otherwise the insertion of a new token would not work, too).
This is the xhtml file. Let me know if you need more.
<!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"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:mywidgets="http://java.sun.com/jsf/composite/widgets"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<ui:composition template="/templates/overviewTemplate.xhtml">
<!-- <ui:composition template="/templates/contentTemplate.xhtml"> -->
<ui:define name="title">Text Administration</ui:define>
<ui:define name="body">
<h1>Text Administration</h1>
<h:panelGroup layout="block" id="searchListGroup" rendered="true">
<h:form id="listOfTextUnits">
<h:inputText autocomplete="true" style="width: 300px"
value="#{textController.searchFilter}"
pt:placeholder="Token or text in English" pt:autofocus="true"
title="Search by token or text in English">
<f:ajax event="keyup" execute="#this" render="textTable" />
</h:inputText>
<p class="betweenSections" />
<h:dataTable id="textTable"
value="#{textController.findTextUnitsByString()}" var="textUnit"
styleClass="data-table" headerClass="table-header"
rowClasses="table-odd-row,table-even-row">
<h:column>
<!-- column header -->
<f:facet name="header">Action</f:facet>
<!-- row record -->
<h:commandButton value="view" styleClass="mini"
action="#{textController.loadTextDetail()}">
<f:param name="id" value="#{textUnit.id}" />
<f:ajax execute="#form" render="textUnitGroup" />
</h:commandButton>
</h:column>
<h:column sortBy="#{textUnit.token}"
filterExpression="#{empty filterValue or fn:startsWith(textUnit.token, filterValue)}"
filterValue="#{textController.searchFilter}">
<f:facet name="header">Token</f:facet>
<h:outputText value="#{textUnit.token}" />
</h:column>
<h:column>
<!-- column header -->
<f:facet name="header">Default Text</f:facet>
<!-- row record -->
#{textUnit.defaultText}
</h:column>
</h:dataTable>
</h:form>
</h:panelGroup>
<h:panelGroup layout="block" id="textUnitGroup"
rendered="true">
<h2>Text unit</h2>
<h:form id="textUnit">
<h:inputHidden id="id" value="#{textController.id}" />
<label for="token">Token</label>
<h:inputText id="token" value="#{textController.token}"
required="true"
requiredMessage="Please insert a token string for this new translation." />
<label for="text">Default Text</label>
<h:inputTextarea id="text" value="#{textController.text}"
required="true"
requiredMessage="Please insert a default text translation."
cols="100" />
<h:commandButton value="save text"
action="#{textController.saveText()}">
<f:ajax execute="#form" render="searchListGroup" />
</h:commandButton>
</h:form>
</h:panelGroup>
<p class="betweenSections" />
</ui:define>
</ui:composition>
</html>
Thanks for any hint
--------------------------------UPDATE-------------------------------
Assuming that something with the JavaScript code has gone broken, I did put the h:panelGroup within the h:form tags. Now that works. The drawback with this is, that the h2 tags is never rerendered erspectively shown. This is what I wanted in the next step. Hide the form and then display, when needed.
To properly rephrase the question: How could one re-render a panelgroup which contains multiple h:form whitout listing all the forms in the render attribute of the f:ajax tag? Not possible at all?
Thanks for any hint!

ui:include with method breaks the jsf's ajax function

I'm facing a pretty similar issue on which I already made a ticket but now the problem arises in my main project. The previous ticket involved a test project.
Here's the link to the ticket. I'll first explain my project briefly and then provide the code.
It's a basic ui since I left out irrelevant parts, but when you start the webapp you should be directed to the main page which has an intro loaded through the use of ajax. I'm using a managedbean called Navigation which is a simple pojo with 2 annotations and one string property called 'page'. I've set the property to 'intro', so it's loaded by default.
// Navigation.java
#ManagedBean
#RequestScoped
public class Navigation {
private String page = "intro";
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
index.xhtml looks like this:
<!-- index.xhtml -->
<h:body>
<!-- Navigation -->
<h:form>
<p:menubar>
<p:menuitem value="Home" icon="ui-icon-home" action="#{navigation.setPage('intro')}" update=":contentPanel" />
<p:submenu label="Actions" icon="ui-icon-transferthick-e-w">
<p:submenu label="Employee">
<p:menuitem value="Search" action="#{navigation.setPage('employee/find')}" update=":contentPanel" />
</p:submenu>
</p:submenu>
</p:menubar>
</h:form>
<!-- ContentPanel -->
<p:panel id="contentPanel" styleClass="content">
<ui:include src="/#{navigation.page}.xhtml" />
</p:panel>
</h:body>
Now, when you navigate to 'Actions/Employee/Create new' the file find.xhtml does get loaded into the main page but, the form itself doesn't work. Here's the file:
<!-- find.xhtml -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:facet name="header">
Create new employee
</f:facet>
<h:outputLabel value="User ID: " for="userId" />
<p:inputText value="#{managedEmployee.userId}" id="userId" />
<p:commandButton value="Show" update="result" />
<h:outputText id="result" value="#{managedEmployee.userId}" />
</ui:composition>
So a user would be able to input a userId in the form and it would be displayed near the form when commandbutton is pressed. Obviously I must be doing something wrong but I can't seem to figure it out. I don't like saying it, but I'm desperate for an answer.
Thanks in advance!
I may not be understanding the question, but you don't have an action set on your commandButton so of course it's not going to do anything.
<p:commandButton value="Show" update="result" />
should have something like
<p:commandButton value="Show" update="result" action="#{backer.method}"/>
I've found a solution for my problem. Not sure what the reason is but if I surround the code in ui:composition with h:form and add that form id to update on the link it works.
Hope this helps others when they encounter it. Cheers
<p:menuitem value="Create" action="#{navigationBean.setPage('employee/create')}" update=":contentPanel :form" />
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:form id="form">
...
</h:form>
</ui:composition>

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