Everything inside f:view <f:view rendered="#{p.statusmsg!=null}">,<f:view rendered="#{p.picstatus!=null}"> and <f:view rendered="#{p.videostatus!=null}"> is getting executed whether the value of statusmsg,picstatus or videostatus is null or not
1)getMoreStatusUpdate.xhtml
<!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"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head></h:head>
<h:body>
<div id="content">
<h:form>
<ui:repeat var="p" value="#{statusBean.moreStatusList}">
<f:view rendered="#{p.statusmsg!=null}">
//Status content
</f:view>
<f:view rendered="#{p.picstatus != null}">
//Picture Status Content
</f:view>
<f:view rendered="#{p.videostatus != null}">
//Video Status Content
</f:view>
</ui:repeat>
</h:form>
</div>
</h:body>
The <f:view> doesn't have a rendered attribute.
This attribute is only supported on UIComponent based tags, which is all tags of the h: library and a few of the ui: library including <ui:fragment>.
Just replace <f:view> by <ui:fragment>.
See also:
Conditionally displaying JSF components
Related
I am new this field.
I am using Facelets for template designing.
In my project,I need a template which is changing the content dynamically when click on p:menuitems with using ui:insert and ui:define.
I already tried this and its working fine like each p:menuitems clicks the page gets one refresh and then change the content.
But,I need to change the content of the template without get refresh of the page.
Here, I added my program.
home.xhtml
<ui:composition template="index.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
</ui:composition>
header.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">`enter code here`
<h:form>
<p:menu>
<p:menuitem value="One" url="/pages/one.xhtml"/>
<p:menuitem value="Two" url="/pages/two.xhtml"/>
<p:menuitem value="Three" url="/pages/three.xhtml"/>
</p:menu>
</h:form>
</ui:composition>
footer.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<p>This is Footer</p>
</ui:composition>
template.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Template Page</title>
</h:head>
<h:body>
<div id="headerId">
<p:panel>
<ui:include src="/pages/header.xhtml"/>
</p:panel>
</div>
<div id="contentId">
<ui:insert name="content">
<p:panel>
<p>Default Content</p>
</p:panel>
</ui:insert>
</div>
<div id="footerId">
<p:panel>
<ui:include src="/pages/footer.xhtml"/>
</p:panel>
</div>
</h:body>
</html>
one.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<ui:define name="content">
<p>Change content from one page</p>
</ui:define>
</ui:composition>
two.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="content">
<p>Change content from two page</p>
</ui:define>
</ui:composition>
three.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="content">
<p>Change content from three page</p>
</ui:define>
</ui:composition>
Here,The home.xhtml is my welcome page.
please,give me an idea to solve this.
Thanks in advance.
Whenever I perform an action in the modal dialog it closes but the action is performed because when I open the dialog again method was executed. What's wrong in my code that keeps the dialog closing after action?
mantenimientoItems.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">
<ui:composition 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"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<h:form id="MantForm">
<h:panelGrid columns="7">
...
<p:inputText id="idClas"
value="#{MantenimientoItemsBean.itemsFiltrosVO.clasTitulo}"
update=":dialog3" onclick="busClas.show(); return false;">
<p:ajax event="click"
listener="#{MantenimientoItemsBean.ValidarTipoBuscador0}"/>
</p:inputText>
...
</h:form>
<p:dialog id="dialog3" appendToBody="true" modal="true"
widgetVar="busClas" dynamic="true" width="1400" height="850">
<ui:include src="buscadorClasificador.xhtml" />
</p:dialog>
</h:body>
</ui:composition>
buscadorClasificador.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">
<ui:composition 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<h:form id="BClasForm">
...
<tr>
<td>
<p:commandButton value="Buscar" ajax="false"
action="#{MantenimientoItemsBean.BuscarClasificador()}"/>
</td>
</tr>
...
</h:form>
</h:body>
</ui:composition>
When you set the attribute ajax="false" on a command button, it will submit its enclosing form causing the dialog to close. If you don't won't this, you have two options, either remove the ajax="false" in which case the form is not submitted, or add an attribute type="button" which renders the type="button" instead of type="submit", thus again avoid form submit.
my jsf pages show error
unable to find matching navigation case with from view id for action 'index'
unable to find matching navigation case with from view id for action 'login'
but i never declare any outcome index and login, even from faces-config.
but it's showing in every page
here is my jsf
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:p="http://primefaces.org/ui"
xmlns:lcg="http://www.lassitercg.com/jsf">
<f:metadata>
<f:viewParam name="id" value="#{bean.bean_id}"></f:viewParam>
<f:event listener="#{bean.init}" type="preRenderView"></f:event>
</f:metadata>
<h:head>
</h:head>
<h:body>
<ui:composition template="../layout.xhtml">
<ui:define name="content">
<h:form id="form_id">
<h:messages id="form_messages" style="color:red;margin:8px;"></h:messages>
<p:commandButton value="submit" action="#{bean.submitForm}"></p:commandButton>
<p:button outcome="cancel" value="Cancel"></p:button>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
I'm new to JSF and I'm facing this weird issue. I'm sure it's a silly mistake but I just can't seem to figure it out. Basically, when I insert rich:calendar within ui:composition it does not display. My (simplified) template is defined like this
<?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://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title></title>
</h:head>
<h:body>
<ui:insert name="content"/>
<ui:debug/>
</h:body>
</html>
My index 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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich">
<head>
<title></title>
</head>
<body>
<ui:composition template="/indexLayout.xhtml">
<h:outputScript library="javascript" name="common.js" target="head"/>
<ui:define name="content">
<h:form>
<h:panelGrid columns="2">
From
<rich:calendar id="pickup" onchange="#{rich:component('return')}.setValue(#{rich:component('pickup')}.getValue())"
dayDisableFunction="disablementFunction" datePattern="MMM d, yyyy" value="#{reservation.pickUp}" />
To
<rich:calendar id="return" dayDisableFunction="disablementFunction" datePattern="MMM d, yyyy" />
</h:panelGrid>
<h:commandButton value="Redisplay" />
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
If I define the index page without ui:composition it displays just fine. Please help. Thank you.
You should place your <h:outputScript /> inside the <ui:define></ui:define> since when you are using <ui:composition />, every <ui:insert /> inside the template are replaced by respective <ui:define />. Everything outside <ui:define /> is not rendered.
In your case the JavaScript function disablementFunction is not loaded so your rich:calendar doesn't work properly.
Here is how your index page should look like :
<ui:composition template="/indexLayout.xhtml">
<ui:define name="content">
<h:outputScript library="javascript" name="common.js" target="head"/>
<h:form>
<h:panelGrid columns="2">
From
<rich:calendar id="pickup" onchange="#{rich:component('return')}.setValue(#{rich:component('pickup')}.getValue())" dayDisableFunction="disablementFunction" datePattern="MMM d, yyyy" value="#{reservation.pickUp}" />
To
<rich:calendar id="return" dayDisableFunction="disablementFunction" datePattern="MMM d, yyyy" />
</h:panelGrid>
<h:commandButton value="Redisplay" />
</h:form>
</ui:define>
</ui:composition>
More info :
JSF 2 templating with Facelets example
I have a backing bean method (session scoped) within two nested forms which will not fire.
I set out the question with a generic example which exhibits the problem.
I would appreciate an insight into how/why the forms, dialogs and appendToBody tag are causing the problem.
To clarify, the action in contentsOfDialogTwo.xhtml - nestedDialogsBean.actionOnClickOfDialogTwoItem() - does not fire. The javascript alert is displayed, but a breakpoint on the action on the backing bean shows that this is not called.
Template View:
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<ui:insert name="content"/>
</ui:composition>
</html>
Parent View:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="../templates/layout.xhtml">
<ui:define name="content">
<h:form>
<p:panel>
<p:tabView id="exampleTabView" dynamic="false">
<p:tab id="nestedDialogsTab" title="Nested Dialogs Tab">
<ui:insert>
<ui:include src="childView.xhtml"></ui:include>
</ui:insert>
</p:tab>
</p:tabView>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
Child view:
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<p:commandButton
id="openDialog1"
value="Open Dialog 1"
action="#{nestedDialogsBean.actionOnOpenOfDialog1()}"
oncomplete="dialogOneVar.show()">
</p:commandButton>
<p:dialog id="dialogOne" header="Panel One" widgetVar="dialogOneVar"
resizable="false" modal="true" closable="true" dynamic="true"
hideEffect="fold" draggable="false" height="700" width="1000">
<ui:insert>
<ui:include src="contentsOfDialogOne.xhtml"></ui:include>
</ui:insert>
</p:dialog>
</ui:composition>
</html>
contentsOfDialogOne.xhtml:
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<p:commandButton
id="openDialog2"
value="Open Dialog 2"
action="#{nestedDialogsBean.actionOnOpenOfDialog2()}"
oncomplete="dialogTwoVar.show()">
</p:commandButton>
<p:dialog id="dialogTwo"
header="Dialog Two"
widgetVar="dialogTwoVar"
closable="true"
dynamic="true"
resizable="false" draggable="false" height="700"
width="1000" hideEffect="fold" appendToBody="true" >
<ui:insert>
<ui:include src="contentsOfDialogTwo.xhtml"></ui:include>
</ui:insert>
</p:dialog>
</ui:composition>
</html>
contentsOfDialogTwo.xhtml
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<h:form id="innerWrapperFormForDialogTwoDueToAppendToBody">
<p:commandButton id="actionInsideDialogTwouButton"
action="#{nestedDialogsBean.actionOnClickOfDialogTwoItem()}"
onclick="alert('Button clicked')"
value="Invoke Backing Bean Action">
</p:commandButton>
</h:form>
</ui:composition>
</html>
Never use nested forms
appendToBody : Appends dialog as a child of document body.
When using it the rendered content of the dialog is being appended to the body , so if for example in your xhtml the dialog was wrapped by h:form and you using appendToBody="true" in the generated page the dialog wont be wrapped by the form tag
This is illegal in HTML and the behaviour is unspecified and dependent on the webbrowser used. The ajax link doesn't submit the form, it just collects the input values by JavaScript and then sends a XMLHttpRequest in the background.
why a:commandLink's action attribute works but h:commandLink's does not?
Multiple h:form in a JSF Page