Do you have any idea why the following outputText component is not rendered when wrapped inside a div?
<?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">
<h:head>
<title>Welcome</title>
</h:head>
<h:body>
<div>
<h:outputText>This line will not be rendered</h:outputText>
</div>
</h:body>
</html>
For example, the HTML page is rendered like the following:
<?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"><head>
<title>Welcome</title></head><body>
<div>
</div></body>
</html>
<h:outputText value="This line will be rendered"/>
See http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_outputText.html
Related
I'm using primefaces 3.5 and i have problem the p:fileUpload compoment.
browser problem
fileupload.js:11 Uncaught TypeError: Cannot read property 'fileupload' of undefined
web 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: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"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition template="/templates/#{sessionScope['template']}">
<ui:define name="headerpage">
<h1>
Questionnaires
<small> Consulter Questionnaires</small>
</h1>
</ui:define>
<ui:define name="body">
<p:fileUpload id="upload" fileUploadListener="#{catalogueController.saveImageProduitUpload}"
mode="advanced"
sizeLimit="10000000"
multiple="true"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
I am facing very strange issue using JSF2 (apache MyFaces 2 and Rich Faces 4.3)
Below is the xhtml code.
<?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:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
</h:head>
<h:body>
<h:form id="form">
<a4j:commandButton immediate="true" value="Check" action="#{bean.someAction}"/>
</h:form>
</h:body>
</html>
When xhtml code is debugged using firebug and any of the rich faces tag is used , i am getting below error in debugger as :
SyntaxError: syntax error # http://localhost:8480/webAppName/javax.faces.resource/jsf.js.faces?ln=javax.faces&stage=Development:1
When <a4j:commandButton> tag is removed and plain jsf tag <h:commandButton> is used error is not thrown.
Also when <a4j:commandButton> is clicked , ReferenceError: RichFaces is not defined error is thrown.
Attaching the generated html code :
1)h:commandButton with f:ajax inside - (it gives ReferenceError: jsf is not defined error when button is clicked)
<?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">
<head><link rel="stylesheet" media="screen" type="text/css" href="/contextRoot/rfRes/skinning.ecss.faces" />
<script type="text/javascript" src="/contextRoot/javax.faces.resource/jsf.js.faces?ln=javax.faces&stage=Development"><!--
//--></script>
</head>
<body>
<form id="testForm" name="testForm" method="post" action="/contextRoot/pages/testPage.faces" enctype="application/x-www-form-urlencoded">
<input id="testForm:j_id_6" name="testForm:j_id_6" type="submit" value="Test" onclick="jsf.util.chain(document.getElementById('testForm:j_id_6'), event,'jsf.ajax.request(\'testForm:j_id_6\',event,{execute:\'testForm \',render:\'testForm \',\'javax.faces.behavior.event\':\'action\'})'); return false;"/>
<input type="hidden" name="testForm_SUBMIT" value="1" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="/6XulvXlIjDBkLb43C7I4+TCqUyuTMbk4Xz6pE7XonVsuqaL" />
</form>
<div id="javax_faces_developmentstage_messages"></div>
</body>
</html>
2) a4j:commandButton - (it gives ReferenceError: RichFaces is not defined error when button is clicked)
<?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">
<head><link rel="stylesheet" media="screen" type="text/css" href="/contextRoot/rfRes/skinning.ecss.faces" />
<script type="text/javascript" src="/contextRoot/javax.faces.resource/jsf.js.faces?ln=javax.faces&stage=Development"><!--
//--></script><script type="text/javascript" src="/contextRoot/javax.faces.resource/jquery.js.faces"><!--
//--></script><script type="text/javascript" src="/contextRoot/javax.faces.resource/richfaces.js.faces"><!--
//--></script><script type="text/javascript" src="/contextRoot/javax.faces.resource/richfaces-queue.js.faces"><!--
//--></script></head>
<body><form id="testForm" name="testForm" method="post" action="/contextRoot/pages/testPage.faces" enctype="application/x-www-form-urlencoded">
<input id="testForm:j_id_6" name="testForm:j_id_6" onclick="RichFaces.ajax("testForm:j_id_6",event,{"incId":"1"} );return false;" value="Test" type="submit" />
<input type="hidden" name="testForm_SUBMIT" value="1" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="DiY2dVKs1zXBkLb43C7I439MwZ/wfbTcBNpwPlLjsh6prC/c" />
</form>
<div id="javax_faces_developmentstage_messages"></div></body>
</html>
Trying to use the JSF2 templates feature.The base.xhtml page looks like below
<?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>
<h:outputStylesheet name="test.css" library="style" target="head"/>
</h:head>
<h:body>
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/layout/header.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content" >
???
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="/layout/footer.xhtml" />
</ui:insert>
</div>
</div>
</h:body>
</html>
Trying to inherit this template into my page (testpage.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:body>
<ui:composition template="/layout/base.xhtml">
<ui:define name="content">
Default Page content!!!!
<h:outputText value="Foo bar" style="green"/>
</ui:define>
</ui:composition>
</h:body>
</html>
The test.css file is available under the folder webcontent/resources/style and the content of the css file is as follows
.green{
color:#0000FF;
}
Now the problem is when I try to run the testpage the stylesheet is adding into the page (with view source able to identify) but it is not reflecting in the UI.
Is anything wrong in the above code? Any help on this appreciated.
You should use styleClass attribute (equivalent to the class attribute of plain HTML)
Replace
<h:outputText value="Foo bar" style="green"/>
With
<h:outputText value="Foo bar" styleClass="green"/>
Tried Mojarra - 2.0.8, 2.1.6 , MyFaces 2.0.11,2.1.5
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml" xmlns:f="java.sun.com/jsf/core" xmlns:h="java.sun.com/jsf/html" xmlns:ui="java.sun.com/jsf/facelets">
<body>
<h:form>
<h:inputText id="name" value="#{helloBean.name}"></h:inputText>
<h:commandButton value="Welcome Me">
<f:ajax execute="name" render="output" />
</h:commandButton>
<h2><h:outputText id="output" value="#{helloBean.sayWelcome}"/></h2>
</h:form>
</body>
</html>
The XML namespaces are invalid. You've removed the http:// prefix from them all. This is not right.
Here's a rewrite:
<!DOCTYPE html>
<html lang="en"
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">
<h:head>
<title>Page title</title>
</h:head>
<h:body>
<h:form>
<h:inputText id="name" value="#{helloBean.name}"></h:inputText>
<h:commandButton value="Welcome Me">
<f:ajax execute="name" render="output" />
</h:commandButton>
<h2><h:outputText id="output" value="#{helloBean.sayWelcome}"/></h2>
</h:form>
</h:body>
</html>
Note that you also forgot the <h:head> component. This generates a HTML <head> element which allows JSF to auto-include the necessary JS and CSS files. In case of <f:ajax>, the JSF-supplied jsf.js file needs to be (auto)included, otherwise you will face a JS error after the page is been loaded.
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?