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.
Related
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 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 !
Normally I have my jsf page 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:c="http://java.sun.com/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/jsf/template.xhtml">
<ui:define name="content">
<!-- Content Header -->
<section class="content-header">
</section>
<!-- Main content -->
<section class="content">
<h:form>
<div>
<div>
<div>
<div>
<div >
<h:outputText value="Hello World!"/>
</div>
</div>
</div>
</div>
</div>
</h:form>
</section>
</ui:define>
As you noticed, I have a template.xhtml which I import on each jsf page. Below is my template.xhtml.
<!DOCTYPE html>
<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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<f:view>
<h:head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/jsfdefault.css" />
</h:head>
<h:body>
<div class="outer-container">
<div class="inner-container">
<div class="main" style="min-height: 500px">
<div style="width:100%;border: none;">
<ui:include src="/jsf/menu.xhtml"></ui:include>
</div>
<div class="content" style="width: 100%; margin-top:-8px;">
<ui:insert name="content">
</ui:insert>
</div>
<div class="clearer"></div>
</div>
</div>
</div>
</h:body>
</f:view>
</html>
Now I want to modify my template.xhtml. I will check if role = Professor, I will call specific template (templateForProfessor.xhtml) and if role = student, I will call another template (templateForStudent.xhtml). I am not sure where to place the if condition. Glad if you can provide a sample.
templateForProfessor.xhtml
<!DOCTYPE html>
<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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<f:view>
<h:head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<link type="text/css" rel="stylesheet" href="# {request.contextPath}/css/jsfdefault.css" />
</h:head>
<h:body>
<div class="outer-container">
<div class="inner-container">
<div class="main" style="min-height: 500px">
<div style="width:100%;border: none;">
<ui:include src="/jsf/menu.xhtml"></ui:include>
</div>
<div class="content" style="width: 100%; margin-top:-8px;">
<ui:insert name="content">
</ui:insert>
</div>
<div class="clearer"></div>
</div>
</div>
</div>
</h:body>
</f:view>
</html>
templateForStudent.xhtml
<!DOCTYPE html>
<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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/css/default.css" />
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit id="top" position="north" >
<div>
<h:form>
<div>
<div style="float: right;">
</div>
</div>
</h:form>
</div>
</p:layoutUnit>
<p:layoutUnit id="bottom" position="south" >
</p:layoutUnit>
<p:layoutUnit id="left" position="west">
<ui:insert name="leftContent">
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="right" position="east">
<ui:insert name="rightContent">
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="center" position="center" size="0">
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
I am using primefaces v4.0. I have an f:event listener={..} type=preRenderView set in my xhtml. The listener method is also called correctly,but this listener method performs Navigation using Navigation handler. What is observe is that after the navigation is complete and the 2nd page is loaded, the menus of the second page are not showing as expected. Seems there is some css/js not loading. Below is my xhtml template which has the menu 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: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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
>
<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>CBB-Questionnaire</title>
</f:facet>
<link type="text/css" rel="stylesheet" href="#{resource['css:template.css']}" />
</h:head>
<h:body >
<p:tooltip />
<div class="qestDiv" >
<div class="header">
<h:form id="homeform">
<p:menubar >
<p:submenu label="Questionnaire" icon="ui-icon-document" >
<p:menuitem value="Technology Outsourcing" action="TechQuestionnaireForOutSrc"
icon="ui-icon-document" id="TECHQ1"
actionListener="#{usersession.questSelectedSetInSession}"/>
</p:submenu>
</p:menubar>
</h:form>
</div>
<div class="content">
<div class="centerpane">
<div class="pageContent">
<ui:insert name="pageContent" />
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</h:body>
</html>
page1.xhtml is below navigates to page2.xhtml
<ui:composition template="/WEB-INF/templates/template.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"
>
<ui:define name="pageContent" >
<f:event listener="#{techQOutSrcbean.checkSubmissionStatusAndNavigate}" type="preRenderView" />
</ui:define>
</ui:composition>
page2.xhtml
<ui:composition template="/WEB-INF/templates/template.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"
>
<ui:define name="pageContent" >
</ui:define>
</ui:composition>
When page2.xhtml loads it is supposed to show the menus defined in teh template as i am using facelets. But the menus in page2 loads, but it is loaded as
Below is the html source which tells that the js is not loaded on the page where the menu is loaded incomplete.
<!-- taken from the page where menu loads properly -->
<meta http-equiv="X-UA-Compatible" content="EmulateIE8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CBB-Questionnaire</title><link href="/QuestionaireWeb/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" rel="stylesheet" type="text/css"><link href="/QuestionaireWeb/faces/javax.faces.resource/primefaces.css?ln=primefaces&v=4.0" rel="stylesheet" type="text/css"><script src="/QuestionaireWeb/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=4.0" type="text/javascript"></script><script src="/QuestionaireWeb/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&v=4.0" type="text/javascript"></script><script src="/QuestionaireWeb/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=4.0" type="text/javascript"></script><link href="/QuestionaireWeb/faces/javax.faces.resource/css/template.css" rel="stylesheet" type="text/css">
<!-- taken from the page where js/css does not load properly fro the menu -->
<meta http-equiv="X-UA-Compatible" content="EmulateIE8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CBB-Questionnaire</title><link href="/QuestionaireWeb/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" rel="stylesheet" type="text/css"><link href="/QuestionaireWeb/faces/javax.faces.resource/css/template.css" rel="stylesheet" type="text/css">
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" />