I am using primefaces as a framework to use autocomplete.
If I only use primefaces without composition it works well.
<!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:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"> <h:head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <h:outputStylesheet name="css/materialize.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Template</title> </h:head> <h:body class="blue-grey lighten-4"> <ui:include src="cabecalho.xhtml" />
<h:messages id="erromsg" fatalClass="alert alert-danger" errorClass="alert alert-danger" infoClass="alert alert-info" warnClass="alert alert-warning" />
<ui:insert name="corpo" />
<ui:include src="/rodape.xhtml" /> <h:outputScript name="js/jquery-2.1.1.js" /> <h:outputScript name="js/mask/jquery.inputmask.bundle.js" /> <h:outputScript name="js/mask/phone.js" /> <h:outputScript name="js/mask/phone-be.js" /> <h:outputScript name="js/mask/phone-ru.js" /> <h:outputScript name="js/materialize.js" /> <script>
//Select
$(document).ready(function() {
$('select').material_select();
});
//Carosel $('.carousel.carousel-slider').carousel({ fullWidth : true, }); autoplay();
function autoplay() { $('.carousel').carousel('next'); setTimeout(autoplay, 4500); }
//Menu-Mobile $(".button-collapse").sideNav(); //Dropdown $(".dropdown-button").dropdown();
$(document).on("ready",function(){
$(".ui-paginator-first.ui-state-default.ui-corner-all").addClass("btn");
$(".ui-paginator-last.ui-state-default.ui-corner-all").addClass("btn");
$(".ui-paginator-next.ui-state-default.ui-corner-all").addClass("btn");
$(".ui-paginator-prev.ui-state-default.ui-corner-all").addClass("btn");
});
</script> </h:body> </html>
I am using materialize as my framework to front end.
my test page:
<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:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Title</title>
</h:head>
<h:body>
<ui:composition template="_template.xhtml">
<ui:define name="corpo">
<div class="container">
<p:autoComplete id="autocomplete"
value="#{manterProdutoBean.descMarca}"
completeMethod="#{manterProdutoBean.completeMarca}"
forceSelection="true" required="true"
requiredMessage="Informe a marca!" maxResults="3">
<p:ajax event="query" />
</p:autoComplete>
<br />
<p:outputLabel value="Max Results(5):" for="acMaxResults" />
<p:autoComplete id="acMaxResults" maxResults="5"
value="#{manterProdutoBean.descMarca}"
completeMethod="#{manterProdutoBean.completeText}">
<p:ajax event="query" />
</p:autoComplete>
</div>
</ui:define>
</ui:composition>
</h:body>
</html>
When I am using composition, my completemethod is never call.
Could you help me, please?
Sincerely,
Guys thanks for your help! I found the solution! I had imported 2 jquery, one from primefaces and other from materialize! I disabled materialize jquery and it started to working! Thanks for all !
Related
The map does not render when I add the tag. When I remove the tag, the map renders. Please assist.
<html 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">
<h:head>
<title></title>
<h:outputStylesheet library="css" name="base.css" />
</h:head>
<h:body>
<h:form>
<p:gmap
center="#{initParam['centerLatitude']}, #{initParam['centerLongitude']}"
zoom="#{initParam['centerZoom']}" type="map"
style="width:100%;height:100%" model="#{mapBean.mapModel}">
<p:ajax listener="#{mapBean.onMarkerSelect}" event="overlaySelect" />
</p:gmap>
</h:form>
<script
src="https://maps.googleapis.com/maps/api/js?key=#{initParam['googleApiKey']}&callback=initMap"></script>
</h:body>
</html>
When I change from 100% height in the style tag to 600px, the map displayed again. The issue seems to be with a 100% height.
I have a login.xhtml file as initial page in a jsf app.
The content of login.xtml is:
<!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>
<title><ui:insert name="title">Spring-Security - Login</ui:insert>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Template CSS - Do not modify -->
<link rel="stylesheet" type="text/css"
href="#
{facesContext.externalContext.request.contextPath}/css/classnotfound.css" />
</h:head>
<h:body>
<div>
<h:form id="loginFormId" prependId="false">
<div class="forField" style="width: 65%">
<h:inputText id="username" required="true" requiredMessage="Please enter username (or go to hell...)" />
<h:messages for="username" />
</div>
</h:form>
</div>
</h:body>
</html>
But when it loads in a web browser appears in console the message:
Resource interpreted as Stylesheet but transferred with MIME type application/xhtml+xml
without painting the h:form code
What is wrong?
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>
I want to ask a question that i have a master template 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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Login</title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<ui:include src="header.xhtml" id="header"/>
</ui:insert>
</div>
<div>
<div id="content">
<ui:insert name="content"></ui:insert>
</div>
</div>
<div id="bottom" style="position: absolute;top: 675px;width: 100%" align="center">
<ui:insert name="bottom">
<ui:include src="footer.xhtml" id="footer"/>
</ui:insert>
</div>
</h:body>
</html>
On my each page i am using something 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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>City Setup</title>
</h:head>
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="content">
<h:form id="cityReviewform">
......
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Now what is happening that because of the ui;composition my tile attribute is now working on each page, because ui:composition discard every tag outside of it. Now on each page i have a title of Login(i.e of master template). So i want to ask that how can i do this that on each page, its own title shown instead of Login(master tempalte title)?
Thanks
In the template client, everything outside <ui:composition> is ignored. You need to change your template approach to provide an <ui:insert> for the title in the master template, so that it can be defined by an <ui:define> in the template client.
Master template:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title><ui:insert name="title">Login</ui:insert></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<ui:include id="header" src="header.xhtml"/>
</ui:insert>
</div>
<div>
<div id="content">
<ui:insert name="content" />
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include id="footer" src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
Template client:
<ui:composition template="/WEB-INF/templates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<ui:define name="title">City Setup</ui:define>
<ui:define name="content">
<h:form id="cityReviewform">
...
</h:form>
</ui:define>
</ui:composition>
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
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