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>
Related
I having problems putting a buttonset with Primefaces.
I saw some other posts
How to use jQuery and jQuery plugins with PrimeFaces
with similiar issues and didn´t get any result.
heres the a code sample:
<?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.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view locale="#{templateManager.userLocale}">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>#{msgs['report.title']}</title>
<h:outputStylesheet name="ssl-common.css" library="css"/>
<h:outputStylesheet name="final.css" library="css"/>
<link href="#{resource['img:favicon.ico']}" rel="icon"/>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
</h:head>
<body id="reportList">
<ui:include src="../WEB-INF/header.xhtml" />
<section>
<h:form prependId="false">
<nav>
<div id="actionBar">
<div class="wraper">
<hgroup>
<h1>#{msgs['report.title']}</h1>
</hgroup>
<div id="subMenu" style="padding: 10px">
<script>
$(function() {
$("#radio").buttonset();
});
</script>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</div>
</div>
</div>
</nav>
(...)
<h:outputScript library="js" name="common.js"/>
<h:outputScript library="js" name="script.js"/>
<h:outputScript library="js" name="primefacesLocalePT-PT.js" />
<!--<h:outputScript library="js" name="jquery-ui-1.8.2.js" />-->
<script src="http://maps.google.com/maps/api/js?sensor=true&language=#{templateManager.userLocale}" type="text/javascript"/>
</body>
</f:view>
</html>
With this code I receive the error:
TypeError: $(...).buttonset is not a function
[Break On This Error]
$("#radio").buttonset();
does anybody had a similar problem?
You need to include jQuery UI, too. Right now the script tag for that is commented out.
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"/>
Why do I lose all CSS and JS when I refresh page that has templating in JSF?
My Template :
<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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="top">
<h:form>
<h:commandButton value="Home" action="#{auth.goHome()}"/>
<h:commandButton value="Logout" action="#{auth.logout}"/>
</h:form>
</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
</html>
Child Page:
<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>Facelet Title</title>
</h:head>
<h:body>
<ui:composition template="/contentTemplate.xhtml" >
</ui:composition>
</h:body>
</html>
**GET http://localhost:11032/Integration/Common/resources/css/default.css 404 (Not Found) welcome.xhtml:5
GET http://localhost:11032/Integration/Common/resources/css/cssLayout.css 404 (Not Found)**
for start try to replace
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
(and the other css) with
<h:outputStylesheet name="css/default.css" target="head" /> (do same for the other css)
If that wont work you can try using #{facesContext.externalContext.requestContextPath}
<link href="#{facesContext.externalContext.requestContextPath}/css/default.css" rel="styleSheet" type="text/css"/>
I want to use p:fileUpload to upload image in my application.
Here i create a demo program for that which work correctly. but when i put it within the JSF template it's look is change and doesn't invoke the FileUploadEvent.
Here is my jsf page: (working)
// ------------
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced"
update="messages"
sizeLimit="100000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
auto="true"/>
<p:growl id="messages" showDetail="true"/>
</h:form>
//-------- Backing bean
#ManagedBean
public class FileUploadController
{
public void handleFileUpload(FileUploadEvent event) {
FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
try {
String path = FacesContext.getCurrentInstance().getExternalContext().getRealPath("/");
SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmss");
String name = fmt.format(new Date())
+ event.getFile().getFileName().substring(
event.getFile().getFileName().lastIndexOf('.'));
File file = new File(path + "/" + name);
this.setFileName(name);
this.setState(Boolean.TRUE);
InputStream is = event.getFile().getInputstream();
OutputStream out = new FileOutputStream(file);
byte buf[] = new byte[1024];
int len;
while ((len = is.read(buf)) > 0) {
out.write(buf, 0, len);
}
is.close();
out.close();
} catch (Exception e) {
System.out.println("Exception in file io");
}
}
}
//------- Now i put it within the template it doesn't work as following
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition template="/layout/homeLayout.xhtml">
<ui:define name="content">
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced"
update="messages"
sizeLimit="100000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
auto="true"/>
<p:growl id="messages" showDetail="true"/>
<br/>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
//------- Here is my homeLayout.xhtml (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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<!-- JQuery Data Table Dependencies START-->
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/demo_page.css" rel="stylesheet" type="text/css"/>
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/demo_table_jui.css" rel="stylesheet" type="text/css"/>
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css"/>
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#dataTbl1").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
});
</script>
<!-- JQuery Data Table Dependencies END-->
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<h:graphicImage url="#{facesContext.externalContext.requestContextPath}/resources/images/loginUser.png"/>
<h:outputText value="Jewellery Shop" style="font-size: x-large;font-family: Monotype-Corsiva"/>
<ui:include src="../pages/common/userMenu.xhtml"/>
</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
</html>
I try a lot to find whats the problem but i can't find the soluti
PrimeFaces already ships with jQuery and jQuery UI bundled. It might have conflicted with your jQuery libraries which you added manually and hence cause all PrimeFaces components which depend on assistance of jQuery to fail. Also the value of jQuery datatables is questionable as the PrimeFaces <p:dataTable> practically supports almost everything also supported by jQuery DataTables plugin. Explore the <p:dataTable> showcase to learn about all of its capabilities.
There's not really need to manually use jQuery and jQuery UI when using PrimeFaces. It already ships with a big set of rich UI components based on top of jQuery UI. You should instead look what component PrimeFaces offers for the particular functional requirement and use it.
See also:
What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
I faced the same problem when I wanted to use it with JSF template. I have found the solution. The problem appears when you use the regular expression
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
When you parameterise the allowType with <ui:param name="allowType" value="/(\.|\/)(rptdesign)$/" /> then it replaces the "\." with "." (dot without slash).
I have sent the allowType value with double slash like below and now it is working fine.
<ui:include src="path_to_dialogUploadFiles.xhtml" >
<ui:param name="name" value="UploadDesign" />
<ui:param name="header" value="Header value" />
<ui:param name="fileUploaderListenerBean" value="#{listenerBean}" />
<ui:param name="commandButtonValue" value="Upload" />
<ui:param name="isMultiple" value="true" />
<ui:param name="allowType" value="/(\\.|\\/)(gif|jpe?g|png)$/" />
</ui:include>`
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.