I have the following situation: I want to update the content inside the "tpNavigationDetail" when clicking the commandbutton in the template_detail.xhtml.
query_overview.xhtml and query_detail.xhtml have the same QueryController.
How can I manage it with JSF?
query_detail.xhtml is inside the template_detail.xhtml
query_overview.xhtml is inside the template_navigation.xhtml
I appreciate any Help
query_detail.xhtml
<html 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:tp="http://www.tp.de/facelets" xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
<ui:composition template="/prime/template/template_detail.xhtml">
<ui:define name="detailLeft">
...
</ui:define>
<ui:define name="detailRight">
......
</ui:define>
</ui:composition>
</h:body>
</html>
template_detail.xhtml
<!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:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:tp="http://www.tp.de/facelets"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
<ui:composition template="/prime/template/template.xhtml">
<ui:param name="renderHeader" value="true"/>
<ui:define name="frame">
<h:form id="form" enctype="multipart/form-data">
<p:panel rendered="#{p:ifAnyGranted(renderOnRole) or fn:contains(pageStyle, 'useNoRole')}" style="min-height:150px">
<p:commandButton update="#(*[id*=tpNavigationDetailContent])"
action="#{controller.update}"
value="#{desk_messages.map['button.save']}"
rendered="#{controller.updateMode}"
disabled="#{!controller.isEntityEditable}"
icon="ui-icon-check" />
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
query_overview.xhtml
<html 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:tp="http://www.tp.de/facelets" xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions" xmlns:tpd="http://www.tp-dialog.de/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
<ui:composition template="/prime/template/template_navigation.xhtml">
<ui:param name="controller" value="#{queryController}"/>
<ui:define name="customDetail">
<f:facet name="header">
<p:spacer width="32" height="32" styleClass="tpTitleIcon tpTitleIconExports" style="margin-right: 10px;" />
<h:outputText value="#{desk_messages.map['title.query']}"/>: <tp:outputText object="#{queryController.entity}"/>
<h:outputText value=" (#{myWithFailedStatusI18nCategoryModel.i18nCodeMap[queryController.entity.status]})"
rendered="#{queryController.entity.status != 'A'}"/>
</f:facet>
<ui:include src="/prime/query/query_result.xhtml"/>
</ui:define>
</ui:composition>
</h:body>
</html>
template_navigation.xhtml
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:tp="http://www.tp.de/facelets" xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
<ui:composition template="/prime/template/template.xhtml">
<ui:param name="renderHeader" value="true"/>
<ui:param name="autosize" value="true"/>
<ui:define name="frame">
<pe:layoutPane id="tpNavigationDetail" position="center" render="false">
<ui:insert name="customScript"/>
<h:form id="form" enctype="multipart/form-data">
<c:if test="${fn:contains(pageStyle, 'customDetail')}">
<p:panel id="tpNavigationDetailContent" style="min-height:150px">
<ui:insert name="customDetail"/>
</p:panel>
</c:if>
</h:form>
</pe:layoutPane>
<!-- tp navigation -->
<pe:layoutPane id="tpNavigationOverview" position="east" size="#{navigationSize}" minSize="#{navigationMinSize}" maxSize="#{navigationMaxSize}">
<f:facet name="header">
<ui:insert name="tpNavigationOverviewHeader"/>
</f:facet>
<ui:insert name="navigationOverview"/>
</pe:layoutPane>
</ui:define>
</ui:composition>
</h:body>
</html>
you wan to update "tpNavigationDetail" but you write this :-
update="#(*[id*=tpNavigationDetailContent])" ,
change update attribute like this
update="#(*[id*=tpNavigationDetail])"
Related
I have a simple composition with a menu, and the menu has a p:selectOneMenu for the locale
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view locale="#{sesion.locale}">
<h:head>
<title>Hello World JSF 2.3</title>
</h:head>
<h:body>
<ui:composition template="/template1.xhtml">
<ui:define name="contenido">
<h:form id="content">
<p:outputLabel value="#{i18n_base['helloworld']}"/>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</f:view>
</html>
The menu
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view locale="#{sesion.locale}">
<h:head>
</h:head>
<h:body>
<h:form id="menu">
<p:menubar>
<p:submenu label="${i18n_menu['flujos']}">
<p:menuitem value="${i18n_menu['flujo.edicion']}" url="/frontend/gestion/flujo/lista.xhtml"/>
<p:menuitem value="${i18n_menu['flujo.creacion']}" url="/frontend/gestion/flujo/edicionFlujo.xhtml"/>
</p:submenu>
<f:facet name="options">
<p:selectOneMenu value="#{sesion.locale}" converter="localeConverter">
<p:ajax listener="#{sesion.localeCambiado}" update="#form"/>
<f:selectItems value="#{sesion.allLocales}" var="_locale" itemValue="#{_locale}" itemLabel="${i18n_menu['locale.' += _locale.language]}"/>
</p:selectOneMenu>
</f:facet>
</p:menubar>
</h:form>
<ui:insert name="contenido">Contenido</ui:insert>
</h:body>
</f:view>
</html>
And I get this page
With this code it works as expected: When I change the selected language the menu language is updated but the "helloworld" label is not affected.
But if I change the "update" attribute of the "p:ajax" component, when I update the value then the page breaks
What am I doing wrong?
I am using Primefaces 7.0 on WildFly 18.0.0.1
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.
I have the site export.xhtml below which loads the mailListDialog.xhtml file:
export.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<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:p="http://primefaces.org/ui" template="/templates/template.xhtml">
<ui:define name="window_title">eMember - #{messages['title_label']}
</ui:define>
<ui:define name="header_title">
<h:outputText value="eMember - #{messages['title_export_mail']}" align="center" rendered="#{exportController.type == 'MAIL'}"/>
</ui:define>
<ui:define name="content">
<h:form id="exportForm" style="height:100%">
<!-- more data -->
<p:commandButton onclick="PF('mailList').show()" value="#{messages['export_create_mail']}" update=":mailListForm"
rendered="#{exportController.type == 'MAIL'}"/>
</h:form>
<!-- Mail-List-Dialog -->
<ui:include src="/pages/secured/dialogs/mailListDialog.xhtml" />
</ui:define>
</ui:composition>
The mailListDialog.xhtml looks like:
<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:p="http://primefaces.org/ui">
<h:outputScript library="primefaces" name="jquery/jquery.js"/>
<h:outputScript library="default" name="js/jquery.zclip.min.js"/>
<script type="text/javascript">
alert("init *" + $("#mailListForm\\:data").text() + "*");
$(document).ready(function(){
$('#copyButton').zclip({
path:"#{resources['default:js/ZeroClipboard.swf']}",
copy:$('#mailListForm\\:data').text(),
afterCopy: function()
{
console.log($("hallo55 *" + $("#mailListForm\\:data").text() + "*" + " was copied to clipboard"));
alert("hallo55 *" + $("#mailListForm\\:data").text() + "*");
}
})
});
</script>
<p:dialog header="Mailverteiler"
widgetVar="mailList" resizable="false" id="mailListDlg"
showEffect="clip" hideEffect="clip" modal="true" appendTo="#(body)">
<h:form id="mailListForm">
<p:commandButton id="copyButton" icon="ui-icon-copy"/><br></br>
<h:outputText id="data" value="#{exportController.mailList}"/>
</h:form>
</p:dialog>
If I'm clicking on the button in export.xhtml the dialog will be displayed and I can see the messageBox of the first alert with the mailing list. But if I'm clicking on the copyButton then nothings happens.
I tried to use $('#copyButton').zclip or $('#mailListForm\:copyButton').zclip({ but neither of them worked.
Does anybody know how I can solve this issue?
I am writing a simple page using JSF and Primefaces.
This is my template:
<?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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<p:layout fullPage="true">
<p:layoutUnit position="north" header="North - header" style="font-size: 15px;">
<h:form>
<ui:include src="header.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="west" header="West - menu" style="font-size: 15px;">
<h:form>
<ui:include src="menu.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Center - content" style="font-size: 15px;">
<ui:insert name="content"/>
</p:layoutUnit>
<p:layoutUnit position="east" header="East - nothing" style="font-size: 15px;">
</p:layoutUnit>
<p:layoutUnit position="south" header="South - footer" style="font-size: 15px;">
<ui:include src="footer.xhtml"/>
</p:layoutUnit>
</p:layout>
</h:head>
<h:body>
</h:body>
</html>
I have made simple menu:
<?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"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition>
<p:menu>
<p:submenu label="Main">
<p:menuitem value="Show main" action="glowna?faces-redirect=true"/>
<p:menuitem value="Show resultPage" action="resultPage?faces- redirect=true"/>
<p:menuitem value="Pictures" action="obrazek?faces-redirect=true"/>
</p:submenu>
</p:menu>
</ui:composition>
</h:body>
</html>
And now: I wanted to add some content to "content" unitlayout. I made simple page which uses the template below. If I add to the menuitem action like: action="glowna", when I click that item while my page is running, all the template is shown but without header part.
The left, right, center and footer part is shown properly, but header disappears.
However, if I add to the action atribute faces-redirect=true (action="glowna?faces-redirect=true") everything works fine.
This is my content page: glowna.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://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition template="template.xhtml"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h1>Oto zawartość strony głownej - content</h1>
<p:growl id="growl" showDetail="true"/>
<p:panelGrid columns="1">
<p:inputText value="#{user.imie}" required="true"/>
<p:inputText value="#{user.nazwisko}" required="true"/>
<p:commandButton value="Show it!" actionListener="#{user.click}" update="growl"/>
</p:panelGrid>
</ui:define>
</ui:composition>
</h:body>
</html>
Anyone knows why?
Be grateful for ansewers :)
Consider a nested template:
Base.xhtml:
...
<h:outputText value="#{uiParamter}"/>
<ui:insert name="header"/>
... etc.
Layout.xhtml:
<ui:composition template="Base.xhtml">
...
<ui:insert name="content"/>
... etc.
</ui:composition>
When now defining a template client like this:
<ui:composition template="Layout.xhtml">
<ui:define name="header"> foo </ui:define>
<ui:define name="content"> foo2 </ui:define>
<ui:param name="uiParameter" value="foo3"/>
</ui:composition>
does one have to forward the <ui:param> or <ui:define> in the Layout.xhtml to the Base.xhtml template by redefining it. e.g:
<ui:param name="uiParameter" value="#{uiParameter}">
<ui:define name="header">
<ui:insert name="header"/>
</ui:define>
One could also rephrase this question as: "Do template parameters behave cascading?"
The answer is YES. I've run the following code on JBoss AS 7.0:
nest1.xhtml:
<!DOCTYPE html>
<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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><ui:insert name="title">
Nested
</ui:insert></title>
</h:head>
<h:body>
<ui:insert name="main" />
<h:outputText value="#{uiParam}"/>
</h:body>
</html>
nest2.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets" template="nest1.xhtml">
<ui:define name="main">
<p>Nested templated content.</p>
</ui:define>
</ui:composition>
nest3.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets" template="nest2.xhtml">
<ui:define name="title">Nested Template</ui:define>
<ui:param name="uiParam" value="ui param value" />
</ui:composition>
which was rendered as: