I have a xhtml page which I am calling a method from a managed bean from and it just doesnt seem to work for some reason.I have tried all measures, changed to p : command , tried ajax calls. all page with hcommand works fine, please Im i doing anything wrong here
<?xml version="1.0" encoding="ISO-8859-1" ?>
<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">
<f:metadata>
<f:event type="preRenderView" listener="#{hibernateController.getAllWebSites()}"/>
<f:event type="preRenderView" listener="#{hibernateController.getAllScores()}"/>
</f:metadata>
<h:head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mood Watch</title>
<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body>
<div id="wrapper">
<div id="header">
<h2>Mood Watch</h2>
</div>
</div>
<form>
<p:outputLabel>Filter : </p:outputLabel>
<p:selectOneMenu id="whySelect1" value="#{hibernateController.siteFromMood}">
<f:selectItems value="#{hibernateController.mySites}" var="tempSites" itemLabel="#{tempSites.site}" itemValue="#{tempSites.moodSite}" />
</p:selectOneMenu>
<h:commandButton value="Filter" action="#{hibernateController.filterSites()}"/>
<h:commandButton value="View All" action="#{hibernateController.setSitMoodToNull()}"/>
</form>
<p:dataTable id="moodTable" var="moodValues" value="#{hibernateController.myFrontEndModels}">
<p:column headerText="Date">
<h:outputText value="#{moodValues.dateCreated}" />
</p:column>
<p:column headerText="Site">
<h:outputText value="#{moodValues.sitename}" />
</p:column>
<p:column headerText="Value">
<h:outputText value="#{moodValues.moodValue}" />
</p:column>
</p:dataTable>
</h:body>
public void setSitMoodToNull() {
siteFromMood = null;
System.out.println("This is setSiteFromMood to null :" + siteFromMood);
}
public void filterSites(){
System.out.println("Show me specifics");
}
try this:
your form tag should be like this <h:form> because you are using h:commandButton tag and your p:dataTable tag should be inside h:form tag. Write method name in EL without parenthesis.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<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">
<f:metadata>
<f:event type="preRenderView" listener="#{hibernateController.getAllWebSites()}"/>
<f:event type="preRenderView" listener="#{hibernateController.getAllScores()}"/>
</f:metadata>
<h:head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mood Watch</title>
<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body>
<div id="wrapper">
<div id="header">
<h2>Mood Watch</h2>
</div>
</div>
<h:form>
<p:outputLabel>Filter : </p:outputLabel>
<p:selectOneMenu id="whySelect1" value="#{hibernateController.siteFromMood}">
<f:selectItems value="#{hibernateController.mySites}" var="tempSites" itemLabel="#{tempSites.site}" itemValue="#{tempSites.moodSite}" />
</p:selectOneMenu>
<h:commandButton value="Filter" actionListener="#{hibernateController.filterSites}"/>
<h:commandButton value="View All" actionListener="#{hibernateController.setSitMoodToNull}"/>
<p:dataTable id="moodTable" var="moodValues" value="#{hibernateController.myFrontEndModels}">
<p:column headerText="Date">
<h:outputText value="#{moodValues.dateCreated}" />
</p:column>
<p:column headerText="Site">
<h:outputText value="#{moodValues.sitename}" />
</p:column>
<p:column headerText="Value">
<h:outputText value="#{moodValues.moodValue}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
Related
As the subject said, the needed doctype is not rendered in my JSF pages. My used versions:
Payara Server Payara Server 4.1.2.181 #badassfish (build 220)]]
Mojarra 2.3.3 ( 20171008-2230 673408fa9199477d87f44521ff873d709128c88b)
PrimeFaces 6.2 ("official" version)
I already tried the bundled (2.2.14/13/15?) version, no change, so I upgraded to 2.3.3 from github (official release).
In my entire project I have only one doctype and that is in my "master" template:
base.tpl:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition 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://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile">
<h:doctype rootElement="html" public="-//W3C//DTD XHTML 1.0 Transitional//EN" system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<html lang="#{localizationController.locale.language}" xml:lang="#{localizationController.locale.language}" xmlns="http://www.w3.org/1999/xhtml">
<f:view locale="#{localizationController.locale}" contentType="text/html" />
<h:head>
<f:facet name="first">
<ui:insert name="metadata" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<f:loadBundle var="msg" basename="org.mxchange.localization.generic" />
<f:loadBundle var="project" basename="org.mxchange.localization.project" />
<f:loadBundle var="local" basename="org.mxchange.localization.local" />
<h:outputStylesheet name="/css/custom.css" />
<title>
<h:outputText value="#{initParam['project_title']} - " />
<ui:insert name="document_title">
<h:outputText value="Default document title" />
</ui:insert>
</title>
</h:head>
<h:body>
<pm:page id="master">
<h:panelGroup styleClass="ui-fluid" layout="block">
<pm:header>
<h:panelGroup layout="block">
<h:panelGroup styleClass="page-header" layout="block">
<h1>
<h:outputText value="#{initParam['project_title']} - " />
<ui:insert name="content_header">
<h:outputText value="Default header title" />
</ui:insert>
</h1>
</h:panelGroup>
<h:panelGroup styleClass="page-content-gap" layout="block">
</h:panelGroup>
</h:panelGroup>
</pm:header>
<h:panelGroup styleClass="ui-g" layout="block">
<h:panelGroup styleClass="ui-g-12 ui-md-2" layout="block">
<ui:insert name="menu">
<h:outputText value="Default menu" />
</ui:insert>
<ui:include src="/WEB-INF/templates/widgets/locale_change_widget.tpl" />
</h:panelGroup>
<h:panelGroup styleClass="ui-g-12 ui-md-10 ui-g-nopad" layout="block">
<h:panelGroup styleClass="ui-g-12 ui-g-nopad">
<ui:insert name="content">
<h:outputText value="Default content" />
</ui:insert>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup styleClass="ui-g-12 page-footer" layout="block">
<ui:insert name="footer">
<h:outputText value="Default footer" />
</ui:insert>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup styleClass="error-container" layout="block">
<p:growl showDetail="true" sticky="true">
<p:autoUpdate />
</p:growl>
<p:ajaxExceptionHandler
type="javax.faces.application.ViewExpiredException"
update="exceptionDialog"
onexception="PF('exceptionDialog').show();"
/>
<p:dialog id="exceptionDialog" closable="true" closeOnEscape="true" header="Exception '#{pfExceptionHandler.type}' occured!" widgetVar="exceptionDialog"
height="500px">
<div class="para">
<h:outputText value="#{msg.EXCEPTION_MESSAGE}:" />
<h:outputText value="#{pfExceptionHandler.message}" />
</div>
<div class="para">
<h:outputText value="#{msg.EXCEPTION_STACK_TRACE}:" />
<h:outputText value="#{pfExceptionHandler.formattedStackTrace}" escape="false" />
</div>
<div class="para">
<p:button onclick="window.location.href = document.location.href;"
value="#{msg.RELOAD_PAGE}"
rendered="#{pfExceptionHandler.type == 'javax.faces.application.ViewExpiredException'}" />
</div>
</p:dialog>
</h:panelGroup>
</h:panelGroup>
</pm:page>
</h:body>
</html>
</ui:composition>
Many JSF pages looks like this:
some_guest_page.xhtml:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="/WEB-INF/templates/guest/guest_base.tpl"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="guest_title">
<h:outputText value="#{msg.PAGE_TITLE_INDEX_FOO}" />
</ui:define>
<ui:define name="content_header">
<h:outputText value="#{msg.CONTENT_TITLE_INDEX_FOO}" />
</ui:define>
<ui:define name="content">
<!-- #TODO Here goes your content. //-->
</ui:define>
</ui:composition>
The mentioned guest_base.tpl is a layer beetween the actual page and my "master" template:
guest_base.tpl:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition
template="/WEB-INF/templates/base.tpl"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<ui:define name="document_title">
<ui:insert name="document_guest_title">
<h:outputText value="Default guest title" />
</ui:insert>
</ui:define>
<ui:define name="menu">
<ui:fragment rendered="#{featureController.isFeatureEnabled('guest_menu')}">
<ui:include src="/WEB-INF/templates/guest/guest_menu.tpl" />
</ui:fragment>
</ui:define>
<ui:define name="footer">
<ui:include src="/WEB-INF/templates/guest/guest_footer.tpl" />
</ui:define>
</ui:composition>
Any ideas on how to fix this is warmly welcome. :-)
UPDATE:
Fixed base.tpl slightly. Now at least the locale is being correctly loaded again. f:view seems to also cover at least h:head, h:body and f:loadBundle which makes sense:
f:view component sets the locale
f:loadBundle loads the with the set locale associated message bundle
But now, still the major problem, no doctype, is still present.
I'm using an old version of Primefaces (3.5) in my project and I'm struggling with a problem for 2 days now. The problem is the following:
I have a template, in which I insert an UI. In this UI, I have a TabView, in which I include an xhtml.
I need to check if some inputText fields, set as required, were left blank after a tab change, and if they were, a message must appear under those fields. For that, I'm using <p:message> but it's not working and I can't find the reason. I inspected the page, and found out that the <p:message> field is not being rendered... and I've tried everything and googled for solutions, but to no avail.
Any ideas on how to solve this? (check the above example with <p:message for="test_name" />)
Thanks!
Template Code:
<!DOCTYPE html>
<html xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<meta http-equiv="refresh" content="#{session.maxInactiveInterval};url=#{disclaimer.currentURLincludingQueryString}"/>
</f:facet>
<link rel="shortcut icon" type="image/x-icon"
href="/alt-ui/resources/images/favicon.ico" />
<h:outputStylesheet library="css" name="alt.css" />
<title><ui:insert name="head_title">
<h:outputText value="ALT" />
<ui:repeat value="#{breadcrumbBean.breadcrumbList}" var="breadcrumb">
|<h:outputText value="#{breadcrumb.value}" />
</ui:repeat>
</ui:insert>
</title>
</h:head>
<h:body>
<f:view>
<h:outputScript library="js" name="Common.js" />
<h:outputScript library="js" name="ModalDialog.js" />
<div id="main_header">
<p:graphicImage library="images" name="Logo.png" alt="Logo" />
<div id="alt_header">
<h:outputText value="Remote Services" />
</div>
</div>
<h:form id="mainForm" enctype="multipart/form-data">
#{disclaimer.checkConfirm()}
<div id="center">
<p:messages id="main_msg" showDetail="true" autoUpdate="true" severity="error, fatal" />
<ui:insert name="main-content">center</ui:insert>
</div>
<div id="footer">
<div id="footer_content">
<ui:insert name="footer-content"/>
</div>
</div>
<p:growl id="template_growl" showDetail="false" autoUpdate="true" sticky="true" severity="info, warn"/>
</h:form>
</f:view>
</h:body>
</html>
Page XHTML:
<?xml version="1.0" encoding="utf-8"?>
<ui:composition 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:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets" template="/pages/templates/main_template.xhtml">
<ui:define name="head_title">
<h:outputtext value="#{msg['zynx.test.details.title']}" />
</ui:define>
<ui:define name="main-content">
<p:tabview id="test_tabview" styleclass="rustabview" cache="true" binding="#{zynxtestdetails.tabview}" activeindex="#{zynxtestdetails.activeindex}">
<f:attribute name="enablevalidation" value="#{zynxtestdetails.firsttabchange}" />
<p:ajax event="tabchange" listener="#{zynxtestdetdetails.ontabchange}" immediate="true" />
<p:tab id="tabmetadata" title="#{msg['zynx.test.tab.data.heading']}">
<p:panelgrid columns="1" styleclass="rustabpanel">
<ui:include src="tabtestdata.xhtml" />
</p:panelgrid>
</p:tab>
</ui:define>
</ui:composition>
TabTestData.xhtml:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">
<p:panelGrid id="dataDefinition" columns="5" columnClasses="alignTop,,,alignTop,alignTop">
<h:outputText styleClass="ui-widget-header2" value="#{msg['zynx.test.tab.data.headline']}" />
<p:spacer />
<p:spacer />
<p:spacer />
<p:spacer />
<p:outputLabel value="#{msg['zynx.test.tab.data.name']}" for="test_name" />
<p:inputText id="test_name" value="#{dynamicTestData.name}" size="50" required="true" disabled="#{zynxTestDetails.TestActive()}" validator="#{zynxTestDetails.validateName}" onchange="setTestChangedForBackAction()" />
<p:message for="test_name" />
</p:panelGrid>
</ui:composition>
We are migrating our App from glassfish to wildfly. However, the primefaces theme no longer loads. I am attaching the pages which are loaded .
Firebug console shows an error - ReferenceError: $ is not defined
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: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"
>
<h:head>
<link rel="shortcut icon"
href="http://www.hs-furtwangen.de/fileadmin/templates/favicon.ico"
type="image/x-ico; charset=binary" />
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>#{messages.finquasCompleteName}</title>
</f:facet>
</h:head>
<h:body>
<ui:composition template="./mainTemplate.xhtml">
<ui:define name="NonServiceView">
<h:form>
<p:growl autoUpdate="true" />
<div class="activitySream">
<div class="activityStreamHeader">
#{messages.activityStream}
</div>
<p:outputPanel deferred="true">
<p:dataList id="id_list_activity_stream"
value="#{activityStreamController.logEntries}" var="logEntry"
type="none" emptyMessage="#{messages.noActivitiesFound}">
<div class="activityDescriptionArea">
<div class="activityIconArea">
<h:outputText value="#{activityStreamController.getActionSpecificIconCode(logEntry.changeType)}"
escape="false" />
</div>
<div class="activityDescription">
<h:outputText value="#{logEntry.creator.name}" styleClass="boldLabel" />
<h:outputText value="#{activityStreamController.getActivityTextFirstPartForLogEntry(logEntry)}" />
<h:commandLink styleClass="boldLabel"
action="#{activityStreamController.navigateToEntity(logEntry.abstractEntity)}">
#{activityStreamController.getEnitityText(logEntry.abstractEntity)}
</h:commandLink>
<h:outputText value="#{activityStreamController.getChangeLogLabelOfLogEntry(logEntry)}." />
<div class="activityDate">
<h:outputText value="#{logEntry.changeDate}">
<f:convertDateTime pattern="dd.MM.yyyy HH:mm:ss" timeZone="Europe/Berlin" />
</h:outputText>
</div>
</div>
</div>
</p:dataList>
<p:commandButton value="#{messages.showMore}" action="#{activityStreamController.showMore()}"
update="id_list_activity_stream"
rendered="#{not empty activityStreamController.logEntries}"
styleClass="plainText greenButton showMoreActivitiesButton"/>
</p:outputPanel>
</div>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>`
mainTemplate.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: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"
>
<h:body>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="./headerFooterLoggedInPagesTemplate.xhtml">
<ui:define name="leftHeaderUnit">
<p:commandButton
id="id_btn_home"
action="#{navigationController.navigateHome()}"
value="#{iconSetController.home}"
escape="false" title="#{messages.home}"
update=":structureTreeForm" ajax="false" />
</ui:define>
<ui:define name="rightHeaderUnit">
<p:commandButton id="id_btn_main_user_profile"
action="userProfile"
title="#{messages.myProfile}"
value="#{iconSetController.user}"
ajax="false"
escape="false" />
<p:commandButton id="id_btn_main_help"
action="help"
title="#{messages.help}"
value="#{iconSetController.help}"
escape="false" />
<p:commandButton id="id_btn_main_logout"
title="#{messages.logout}"
value="#{iconSetController.logout}"
escape="false"
action="#{navigationController.logout()}" />
</ui:define>
<!--The empty header field is a necessary in order to display the collapsible button-->
<ui:define name="navigationArea">
<p:layoutUnit position="west"
collapsible="true"
header=""
effect="none"
resizable="true" id="id_lu_navigationBarLeft" size="320" minSize="300">
<p:tabView id="id_tabView_navigationBar"
dynamic="true"
activeIndex="#{navigationController.activeNavigationBarTabIndex}"
styleClass="finquasTabs">
<p:ajax event="tabChange" listener="#{navigationController.onNavigationBarTabChange}" />
<p:tab title="#{messages.myServicesTab}">
<p:panel rendered="#{not empty navigationController.administrationServicesOfCurrentUser}" header="#{messages.myAdministrationServices}">
<h:form id="myAdministrationServicesForm">
<p:dataList id="id_list_my_administration_services"
value="#{navigationController.administrationServicesOfCurrentUser}"
var="service"
rendered="#{not empty navigationController.administrationServicesOfCurrentUser}">
<p:column>
<h:commandLink
action="#{navigationController.viewServiceViaObject(service)}">
#{service.name}
</h:commandLink>
</p:column>
</p:dataList>
</h:form>
</p:panel>
<p:panel rendered="#{not empty navigationController.educationalServicesOfCurrentUser}" header="#{messages.myEducationalServices}">
<h:form id="myEducationalServicesForm">
<p:dataList id="id_list_my_product_services"
value="#{navigationController.educationalServicesOfCurrentUser}"
var="service"
rendered="#{not empty navigationController.educationalServicesOfCurrentUser}">
<p:column>
<h:commandLink
action="#{navigationController.viewServiceViaObject(service)}">
<h:outputText value="#{service.name}" />
<h:outputText value=" #{messages[service.getDegree().getAbbreviation()]}#{messages[service.getDegreeType().getAbbreviation()]}" rendered="#{navigationController.isDegreeProgram(service)}"/>
<h:outputText value=" #{navigationController.getStateOfService(service)}" rendered="#{navigationController.isServiceDegreeProgramOrStudyModule(service)}"/>
</h:commandLink>
</p:column>
</p:dataList>
</h:form>
</p:panel>
<p:panel rendered="#{not empty navigationController.peerReviewsOfCurrentUser}" header="#{messages.myPeerReviews}">
<h:form id="myPeerReviewsForm">
<p:dataList id="id_list_my_review_services"
value="#{navigationController.peerReviewsOfCurrentUser}"
var="service"
rendered="#{not empty navigationController.peerReviewsOfCurrentUser}">
<p:column>
<h:commandLink
action="#{navigationController.viewServiceViaObject(service)}">
#{service.name} (#{messages[service.state.class.name]})
</h:commandLink>
</p:column>
</p:dataList>
</h:form>
</p:panel>
<p:panel rendered="#{not empty navigationController.qualityReportServicesOfCurrentUser}" header="#{messages.myQualityReportServices}">
<h:form id="myQualityReportServicesForm">
<p:tree id="id_list_my_quality_report_services"
value="#{navigationController.qualityReportServiceRoot}"
var="serviceNode"
dynamic="true"
rendered="#{not empty navigationController.qualityReportServicesOfCurrentUser}">
<p:ajax event="expand" listener="#{navigationController.onNodeExpandQualityReportGraph}" />
<p:ajax event="collapse" listener="#{navigationController.onNodeCollapse}" />
<p:treeNode>
<h:commandLink
action="#{navigationController.viewServiceViaObject(serviceNode)}">
<span title="#{messages.qualityReportFinished}"><h:panelGroup layout="block" class="greenCircle" rendered="#{serviceNode.state.position == 3}"/> </span>
<span title="#{messages.qualityReportWaitingForStatement}"><h:panelGroup layout="block" class="yellowCircle" rendered="#{serviceNode.state.position == 2}"/></span>
<span title="#{messages.qualityReportWaitingForStatementStudyDean}"><h:panelGroup layout="block" class="redCircle" rendered="#{serviceNode.state.position == 1}"/></span>
#{serviceNode.simpleName}
</h:commandLink>
</p:treeNode>
</p:tree>
</h:form>
</p:panel>
</p:tab>
<p:tab title="#{messages.serviceStructureTab}">
<p:panel header="#{messages.search}" styleClass="finquasinput">
<h:form id="id_form_main_search">
<p:autoComplete id="id_input_main_search"
forceSelection="true"
placeholder="#{messages.autoCompleteHint}"
value="#{navigationController.serviceName}"
effect="fade"
required="true"
requiredMessage="#{messages.noServiceFound}"
styleClass="autocompleteService"
completeMethod="#{navigationController.completeService}" />
<p:commandButton id="id_btn_main_search"
value="#{iconSetController.search}" escape="false"
action="#{navigationController.viewServiceViaAutoComplete}"
ajax="false" />
</h:form>
</p:panel>
<p:panel header="#{messages.structure}">
<h:form id="structureTreeForm">
<p:tree value="#{navigationController.serviceRoot}"
dynamic="true"
var="serviceNode"
styleClass="finquastree"
animate="true">
<p:ajax event="expand" listener="#{navigationController.onNodeExpandEducationalServiceGraph}" />
<p:ajax event="collapse" listener="#{navigationController.onNodeCollapse}" />
<p:treeNode>
<h:commandLink
action="#{navigationController.viewServiceViaObject(serviceNode)}">
<h:outputText value="#{serviceNode.name} #{messages[serviceNode.getDegree().getAbbreviation()]}#{messages[serviceNode.getDegreeType().getAbbreviation()]}" rendered="#{serviceNode['class'].simpleName == 'DegreeProgram'}"/>
<h:outputText value="#{serviceNode.name}" rendered="#{serviceNode['class'].simpleName != 'DegreeProgram'}"/>
</h:commandLink>
</p:treeNode>
</p:tree>
</h:form>
</p:panel>
</p:tab>
</p:tabView>
</p:layoutUnit>
</ui:define>
</ui:composition>
</ui:composition>
</h:body>
</html>`
headerFooterTemplate.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: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"
>
<h:body>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<ui:insert name="loggedInCheck" />
<f:facet name="last">
<h:outputStylesheet library="css" name="default.css" />
<h:outputScript library="scripts" name="primefacesLocalization.js"
target="head" />
</f:facet>
<p:layout fullPage="true">
<p:layoutUnit id="id_lu_headerUnit" position="north">
<h:form id="id_form_headerForm">
<p:toolbar styleClass="finquasheader">
<p:toolbarGroup styleClass="headerBar">
<ui:insert name="leftHeaderUnit" />
</p:toolbarGroup>
<p:toolbarGroup align="right" styleClass="headerBar">
<ui:insert name="rightHeaderUnit" />
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:layoutUnit>
<ui:insert name="navigationArea" />
<p:layoutUnit id="id_lu_centerUnit" position="center">
<div id="contentArea">
<div class="nonServiceView">
<ui:insert name="NonServiceView" />
</div>
<ui:insert name="ServiceView" />
</div>
</p:layoutUnit>
<p:layoutUnit position="south" id="footerUnit">
<h:form>
<p:toolbar styleClass="finquasfooter">
<p:toolbarGroup>
<ui:insert name="leftFooterContent" />
</p:toolbarGroup>
<p:toolbarGroup align="right" styleClass="footerToolbar">
#{messages.finquasCompleteName}
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:layoutUnit>
</p:layout>
</f:view>
</ui:composition>
</h:body>
</html>`
headerFooterLoggedInPagesTemplate.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: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"
>
<h:body>
<ui:composition template="./headerFooterTemplate.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<ui:param name="currentUser" value="#{sessionController.currentUser}" />
<ui:define name="loggedInCheck">
<c:if test="#{!sessionController.loggedIn}">
<meta HTTP-EQUIV="REFRESH"
content="0;URL='#{navigationController.serverUrl}'" />
</c:if>
</ui:define>
<ui:define name="leftFooterContent">
#{currentUser.firstName} #{currentUser.lastName}
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-49887094-1', 'hs-furtwangen.de');
ga('send', 'pageview');
</script>
</ui:define>
</ui:composition>
</h:body>
</html>`
I got the error. All my template pages were using composition and each had its own head tag. While this worked with glassfish, wildfly did not allow it.
Removing head from all but the base template and making the base template not a composition solved this
i have a weird problem and i can't know the main cause, i have these login page, which uses <f:ajax event=""> to validate username and password:
<!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></h:head>
<h:body>
<h:form>
<h:panelGrid columns="3">
Name:
<h:inputText id="name" value="#{validateBean.name}"
validator="#{validateBean.validateName}">
<f:ajax event="blur" render="nameError" />
</h:inputText>
<h:message for="name" id="nameError" style="color:red" />
Password:
<h:inputText id="password" value="#{validateBean.password}"
validator="#{validateBean.validatePassword}">
<f:ajax event="blur" render="passwordError" />
</h:inputText>
<h:message for="password" id="passwordError" style="color:red" />
<h:commandButton value="Login" action="# {validateBean.login}" />
</h:panelGrid>
these JSF works properly, but the problem appears when i place the same above components under a <ui:composition template=""> inorder to use these page with a template
<!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">
<ui:composition template="/WEB-INF/Templates/BasicTemplate.xhtml">
<ui:define name="content">
<center>
<h:form>
<h:panelGrid columns="3">
Name:
<h:inputText id="name" value="#{validateBean.name}"
validator="#{validateBean.validateName}">
<f:ajax event="blur" render="nameError" />
</h:inputText>
<h:message for="name" id="nameError" style="color:red" />
Password:
<h:inputText id="password" value="#{validateBean.password}"
validator="# {validateBean.validatePassword}">
<f:ajax event="blur" render="passwordError" />
</h:inputText>
<h:message for="password" id="passwordError" style="color:red" />
<h:commandButton value="Login" action="# {validateBean.login}" />
</h:panelGrid>
</h:form>
</center>
</ui:define>
</ui:composition>
</html>
for more clarity, here's the jsf template 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">
<head>
<title><ui:insert name="title">Default title</ui:insert></title>
</head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/> // normal page contains plain text
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
Content area. See comments below this line in the source.
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/> // normal page contains plain text
</ui:insert>
</div>
</body>
</html>
when i tried the later approach the AJAX action doesn't fire at all, please any one explain to me why that happens??
You used <head> instead of <h:head> in your master template. This way JSF is unable to auto-include the required jsf.js JavaScript file for the ajax works.
Fix it accordingly:
<html ...>
<h:head>
...
</h:head>
<h:body>
...
</h:body>
</html>
See also:
commandButton/commandLink/ajax action/listener method not invoked or input value not updated - point 6
I'm using JSF2 with Primefaces3.4.2 I have created a layout in layoutComplex.xhtml as below:
<!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">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>PrimeFaces - ShowCase</title>
</f:facet>
<h:outputScript library="js" name="jscolor.js" target="head" />
<script type="text/javascript">
function handleValidateRequest(xhr, status, args) {
//alert("");
//jscolor.addEvent(window, 'load', jscolor.init);
}
</script>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit id="left" position="west" size="300" resizable="true"
closable="true" collapsible="true" header="Options" minSize="200">
<h:form>
<p:slideMenu style="width:235px;margin-left:-3px;margin-top:-6px;"
id="tree">
<p:submenu label="Product" icon="ui-icon-play">
<p:menuitem value="test color picker"
update=":centerContentPanel " action="#{navigationBean.doNav}"
oncomplete="handleValidateRequest(xhr, status, args)"
icon="ui-icon-arrow-4-diag">
<f:param name="urlParam" value="colorPicker" />
</p:menuitem>
</p:submenu>
</p:slideMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<p:panel header="Colors">
<h:panelGrid columns="2" cellpadding="10">
<h:inputText class="color">
<p:ajax event="change" update="osssutcolor" />
</h:inputText>
<h:outputText style="display: none" id="osssutcolor" />
</h:panelGrid>
</p:panel>
<h:form id="centerContentPanel">
<ui:include src="#{navigationBean.pageName}.xhtml" />
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
Yes,I can dynamically change the source of centerContentPanel without refreshing the whole page and just the centerContentPanel i.e for on click of menuitem present in the layoutComplex.xhtml,and then the colorPicker page's content will be displayed in the centerContenPanel. But issue is: I added a colorpicker.js in the layoutComplex.xhtml head and hope it can work when update centerContent, but actually, it's not working ..
but after refresh all page by press F5 ,it works fine as I expected. Why? How can i fix this?
Following is colorPicker.xhtml:
<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.org/ui">
<h:outputScript library="js" name="jscolor.js" target="head" />
<p:panel header="Colors">
<h:panelGrid columns="2" cellpadding="10">
<h:inputText class="color">
<p:ajax event="change" update="osssutcolor" />
</h:inputText>
<h:outputText style="display: none" id="osssutcolor" />
</h:panelGrid>
</p:panel>
</ui:composition>
and NavigationBean.java
package com.singtel.eshop.control;
import java.io.IOException;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
#SessionScoped
#ManagedBean
public class NavigationBean {
private String pageName = "blank";
public NavigationBean() {
}
public void doNav() {
String urlStr = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("urlParam");
this.pageName = urlStr;
}
public String getPageName() {
return pageName;
}
public void setPageName(String pageName) {
this.pageName = pageName;
}
}
You should call the jscolor.init after ajax call too. Seems like it is being called right after page load and needs to be called after your ajax call or inside your component. You can achieve this by calling jscolor.init in your colorPicker.xhtml file like this.
<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.org/ui">
<h:outputScript library="js" name="jscolor.js" target="head" />
<script>
jscolor.init;
</script>
<p:panel header="Colors">
<h:panelGrid columns="2" cellpadding="10">
<h:inputText class="color">
<p:ajax event="change" update="osssutcolor" />
</h:inputText>
<h:outputText style="display: none" id="osssutcolor" />
</h:panelGrid>
</p:panel>
</ui:composition>