I am pretty new to JSF and RichFaces. I am using RichFaces 4.X and JSF 2.0. I have created a sample page, where my command button is called a a4j button, but it does not seem to be working. Here is my page. Can someone please help
<!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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>My Registration Page</title>
<link href="stylesheet/reset.css" rel="stylesheet" type="text/css" />
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/icons/favicon.png" />
<script language="javascript">
function showProgressBar()
{
alert("its in show");
}
function hideProgressBar()
{
alert("its in hide");
}
</script>
</h:head>
<h:body>
<a4j:jsFunction name="login" action="#{loginBean.validateUser}"
onbegin="showProgressBar();"
oncomplete="hideProgressBar();" />
<div id="login-container">
<div class="login-logo">
<img src="images/logo.png" />
</div>
<f:view>
<div id="loin-form">
<h1>
Log in to your account or sign up to Get Started
</h1>
<h:form>
<h:inputText id="userName" value="#{loginBean.userName}"
validator="#{loginBeanValidator.validateUserName}" required="true"
class="txtFld" />
<h:message for="userName"></h:message>
<h:inputSecret id="passWord" value="#{loginBean.passWord}"
validator="#{loginBeanValidator.validatePassword}" required="true"
class="pswrdFld" />
<h:message for="passWord"></h:message>
<p>
<a4j:commandLink id="forgotPasswordLink"
value="Forgot Your Password? " />
<a4j:commandButton id="loginButton" value="Sign In" action="login();"
styleClass="sign-btn" />
</p>
</h:form>
</div>
</f:view>
</div>
</h:body>
</html>
The actual problem is in your command button
<a4j:commandButton id="loginButton" value="Sign In" action="login();"
styleClass="sign-btn" />
The "action" attribute requires an EL expression to an action method that will be executed on the server when the button is pressed or a navigation rule. The purpose of a4j:jsFunction is to perform an ajax request from javascript call and the purpose of a4j:commandButton is to perform an ajax request when it's pressed. In your case you don't actually need a4j:jsFunction. Just remove it and put its the attributes on the a4j:commandButton like this:
<a4j:commandButton id="loginButton" value="Sign In"
action="#{loginBean.validateUser}" onbegin="showProgressBar();"
oncomplete="hideProgressBar();" styleClass="sign-btn" />
Related
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 !
Good Day.
I've created a PrimeFaces 5 project (JSF 2.2) which makes use of Spring Security 4. I'm attempting to make use of p:dataTable control with single selection enabled, which through an ajax call, updates a p:pickList control.
The problem is related with Spring Security. If I deactivate the security of the page where my page controls are located (admin.faces), the ajax behavior works fine. But if I activate security, I get 403 status codes and the pickList doesn't get updated. I must indicate here that with security activated, if I attempt going to admin page, without logging first, I'm redirected to the login page.
This is the configuration used for Spring Security. Several code was eliminated for sake of simplicity:
<beans:beans xmlns="http://www.springframework.org/schema/security"
xmlns:beans="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
http://www.springframework.org/schema/security
http://www.springframework.org/schema/security/spring-security.xsd">
<http pattern="/*.css" security="none" />
<http pattern="/*.js" security="none" />
<http use-expressions="true">
<intercept-url pattern="/login.faces" access="permitAll" />
<intercept-url pattern="/javax.faces.resource/**" access="permitAll"/>
<intercept-url pattern="/admin.faces" access="hasRole('Administrator')" />
<form-login
login-page="/login.faces"
authentication-failure-url="/login.faces" />
<logout />
</http>
<authentication-manager alias="authManager">
<authentication-provider ref="daoAuthenticationProvider"/>
</authentication-manager>
</beans:beans>
The login 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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Reports</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="_csrf" content="#{_csrf.token}"/>
<meta name="_csrf_header" content="#{_csrf.headerName}"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</h:head>
<body>
<h:messages />
<h:form id="loginForm">
<input type="hidden" name="#{_csrf.parameterName}" value="#{_csrf.token}"/>
<p:panelGrid columns="2">
<h:outputLabel value="User:" />
<h:inputText value="#{loginBean.user}" required="true"/>
<h:outputLabel value="Password:" />
<h:inputSecret value="#{loginBean.password}" required="true"/>
<f:facet name="footer">
<div style="text-align:right;">
<h:commandButton type="submit" id="login"
action="#{loginBean.login}" value="Login" />
</div>
</f:facet>
</p:panelGrid>
</h:form>
</body>
</html>
The protected page (admin):
<!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:p="http://primefaces.org/ui">
<h:head>
<title>Reports</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="_csrf" content="#{_csrf.token}"/>
<meta name="_csrf_header" content="#{_csrf.headerName}"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<h:outputScript library="primefaces" name="jquery/jquery.js"/>
<h:outputScript library="js" name="admin.js"/>
</h:head>
<body>
<h1>Reports</h1>
<br />
<div>
<h:form id="form">
<input type="hidden" name="#{_csrf.parameterName}" value="#{_csrf.token}"/>
<p:messages id="messages" showDetail="false" showSummary="true"
autoUpdate="true" closable="true" />
<br />
<div style="float: left; width: 25%; margin-right: 10px;">
<p:dataTable value="#{reports.tables}" var="tbl"
selection="#{reports.tablesel}" selectionMode="single"
rowKey="#{tbl}" scrollable="true" scrollHeight="300" id="tables">
<p:ajax event="rowSelect" update=":form:selColumns" />
<p:column>
<f:facet name="header">
<h:outputText value="Tables" />
</f:facet>
<h:outputText value="#{tbl}" />
</p:column>
</p:dataTable>
</div>
<div style="float: left;">
<div style="margin-bottom: 10px;">
<div style="float: left; margin-right: 10px;">
<p:selectOneMenu value="#{reports.format}">
<f:selectItem itemValue="pdf" itemLabel="PDF" />
<f:selectItem itemValue="xls" itemLabel="Excel 2003" />
</p:selectOneMenu>
</div>
<div style="float: left; margin-right: 10px;">
<p:commandButton action="#{reports.create}"
value="View report" />
</div>
<div style="clear: both;"></div>
</div>
<p:pickList value="#{reports.lstColumns}" var="c"
itemLabel="#{c}" itemValue="#{c}" style="margin-bottom:10px;"
id="selColumns" />
<div style="margin-bottom: 10px;">
<p:outputLabel value="Conditions" for="filter"
style="display:block;" />
<p:inputTextarea id="filter" value="#{reports.filter}"
style="width:97%;" />
</div>
</div>
</h:form>
</div>
</body>
</html>
A javascript file used in admin.faces:
$(document).ready(function() {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$(document).ajaxSend(function(e, xhr, options) {
xhr.setRequestHeader(header, token);
})
});
Thanks for your attention.
I had the problem with 403 Responses for AJAX calls as well.
The Problem was, that no CSRF Token was submitted.
By manually adding:
<h:form>
...
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</h:form>
it worked.
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 want to implement JSF page with AJAX. This is the code of the JSF page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
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>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> Settings Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="greenBand" class="ui-state-default ui-corner-allh" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Application Settings" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_application_settings.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsdiv" style="width:350px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:panelGrid columns="2">
<h:panelGroup>User Session Timeout</h:panelGroup>
<h:panelGroup>
<h:selectOneMenu value="#{ApplicationController.settingValue('SessionTTL')}">
<f:selectItem itemValue="one" itemLabel="Option one" />
<f:selectItem itemValue="two" itemLabel="Option two" />
<f:selectItem itemValue="three" itemLabel="Option three" />
<f:selectItem itemValue="custom" itemLabel="Define custom value" />
<f:ajax render="input" />
</h:selectOneMenu>
<h:panelGroup id="input">
<h:inputText value="#{ApplicationController.settingValue('SessionTTL')}" rendered="#{bean.type == 'custom'}" required="true" />
</h:panelGroup>
</h:panelGroup>
<h:panelGroup>Maximum allowed users</h:panelGroup>
<h:panelGroup>#{ApplicationController.settingValue('MaxUsersActive')}</h:panelGroup>
</h:panelGrid>
</div>
<div id="settingslayer" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:400px">
</div>
<div id="settingspanel" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px">
</div>
</div>
</div>
</h:body>
</html>
When I load the page I get this error:
One or more resources have the target of "head", but no "head" component has been defined within the view.
This is the code of the header:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<title>Settings Center</title>
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- / END -->
</html>
The Ajax is not working and this error message appears when I load the page. Maybe I'm missing something to add. How I can fix the code?
Best wishes
Peter
Well, I guess you need to edit your header.xhtml like this
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition>
<title>index</title>
<h:head>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen"/>
<script>....
</script>
</h:head>
Make sure that you use <h:head> - and not <head>.
Try to put <ui:composition> inside <html> and around its content in header.xhtml.
As per title. I'm following the JavaServer Faces 2.0 tutorial (found here) - search for "To declare these components" to find roughly where I'm at.
Everthing works up until a certain point, however when I'm told to comment out the html form component, and uncomment the JSF form component, nothing displays. If I recomment out the JSF form and use the html one instead, it works fine. As far as I can see, I've followed the tutorial exactly. Any ideas?
For the record, this is what my index.xhtml looks like:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<!--<h:outputStylesheet name="css/stylesheet.css" />-->
<title>Greeting</title>
</head>
<body>
<div id="mainContainer">
<div id="left" class="subContainer greyBox">
<h4>Hi, my name is Duke!</h4>
<h5>I'm thinking of a number
<br/>
between
<span class="highlight">1</span> and
<span class="highlight">10</span>.</h5>
<h5>Can you guess it?</h5>
<!--<form action="response.xhtml">
<input type="text" size="2" maxlength="2" />
<input type="submit" value="submit" />
</form>-->
<h:form>
<h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
<h:commandButton id="submit" value="submit" action="response" />
</h:form>
</div>
<div id="right" class="subContainer">
<img src="duke.png" alt="Duke waving" />
<!--<h:graphicImage url="/duke.png" alt="Duke waving" />-->
</div>
</div>
</body>
make sure that your web.xml says:
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>