I'm trying to display a primefaces schedule on a xhtml page but this doesn't work.
As said in this question, i eliminated Components which uses Ajax and i noticed that
when i commented the link referencing the jquery file the schedual is displayed and it works fine but of course other jquery stop to work and i also got the following JS error :
TypeError: b3 is undefined # http://localhost:8080/theprojectname/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces:14
When i uncomment the link for the jquery reference file the schedual isn't displayed and i got 2 JS errors :
TypeError: this.jq.mask is not a function # http://localhost:8080/theprojectname/javax.faces.resource/primefaces.js.xhtml?ln=primefaces:16
and :
TypeError: this.jqc.fullCalendar is not a function # http://localhost:8080/theprojectname/javax.faces.resource/schedule/schedule.js.xhtml?ln=primefaces:1
This have happened with the PF version 4.3.1 and the 5.3.
This is my index.xhtml :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="CSS/general.css" type="text/css" />
<link rel="stylesheet" href="CSS/jquery-ui-1.10.0.custom.min.css"
type="text/css" />
<!-- This is the jquery file reference link i've commented : -->
<!-- <script src="JS/jquery-1.8.3.js" /> -->
<script src="JS/jquery-ui-1.10.0.custom.js" />
<script src="JS/jquery.flip.js" />
<script src="JS/jquerygen.js" />
<title>my app</title>
<script>
//<![CDATA[
//]]>
</script>
</h:head>
<body>
<f:view>
<h:form id="form1">
<h:panelGroup id="windsarea" layout="block">
<h:panelGroup id="gesevntsincl" layout="block">
<p:growl id="messages" showDetail="true" />
<p:schedule id="schedule" value="#{scheduleController.eventModel}"
widgetVar="myschedule">
<p:ajax event="dateSelect"
listener="#{scheduleController.onDateSelect}"
update="eventDetails" oncomplete="eventDialog.show()" />
<p:ajax event="eventSelect"
listener="#{scheduleController.onEventSelect}"
update="eventDetails" oncomplete="eventDialog.show()" />
<p:ajax event="eventMove"
listener="#{scheduleController.onEventMove}" update="messages" />
<p:ajax event="eventResize"
listener="#{scheduleController.onEventResize}" update="messages" />
</p:schedule>
<p:dialog widgetVar="eventDialog" header="Event Details"
showEffect="clip" hideEffect="clip">
<h:panelGrid id="eventDetails" columns="2">
<h:outputLabel for="title" value="Title:" />
<p:inputText id="title" value="#{scheduleController.event.title}"
required="true" />
<h:outputLabel for="from" value="From:" />
<p:inputMask id="from"
value="#{scheduleController.event.startDate}" mask="99/99/9999">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputMask>
<h:outputLabel for="to" value="To:" />
<p:inputMask id="to" value="#{scheduleController.event.endDate}"
mask="99/99/9999">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputMask>
<h:outputLabel for="allDay" value="All Day:" />
<h:selectBooleanCheckbox id="allDay"
value="#{scheduleController.event.allDay}" />
<p:commandButton type="reset" value="Reset" />
<p:commandButton id="addButton" value="Save"
actionListener="#{scheduleController.addEvent}"
oncomplete="myschedule.update();eventDialog.hide();" />
</h:panelGrid>
</p:dialog>
</h:panelGroup>
</h:panelGroup>
<div id="tasksbar" />
<div id="startbutn" />
<h:panelGroup id="startmenudiv">
<h:panelGroup id="substartmenudiv" />
</h:panelGroup>
<div style="visibility: hidden;">
<BR />
<BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR />
<BR />
</div>
<div id="loginbackground" />
<div id="logindivflip">
<div id="logindiv">
<br />
<div class="hidden" style="font-weight: 900;">Welcome,please
authentificate :</div>
<br />
<div class="hidden">
<h:outputText value="login :" />
<h:inputText class="rounded" value="#{userBean.login}" />
</div>
<br /> <br />
<div class="hidden">
<h:outputText value="password :" />
<h:inputText class="rounded" value="#{userBean.pwd}" />
</div>
<br /> <br />
<div class="hidden">
<span class="ebbtn"> <a id="logsubmitbtn" href=""
title="Reset" onclick="">Submit <f:ajax event="click"
execute="#this" listener="#{userBean.verifierUserDsLdap}" />
</a> <a id="resetbtn" href="" title="Reset" onclick="">Reset</a>
</span>
</div>
</div>
<div id="loginphoto" />
</div>
<p:remoteCommand name="addNewWindow"
actionListener="#{userBean.addNewWindow}">
<f:param name="windowname" />
</p:remoteCommand>
<p:remoteCommand name="updatewinstylprops"
actionListener="#{userBean.updatewinstylprops}">
<f:param name="windowid" />
<f:param name="top" />
<f:param name="left" />
<f:param name="width" />
<f:param name="height" />
</p:remoteCommand>
</h:form>
</f:view>
</body>
</html>
Does someone have a clue please?
You should not include additionals jquerys into your pages, cause its already bundled with primefcaes...
Also , use h:outputScript instead of <script and h:outputStylesheet instead of link
So your js include should look like this (notice that I first included explicitly the jquery bundled with primefaces
<h:head>
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript name="JS/jquery.flip.js" target="head" />
<h:outputScript name="JS/jquerygen.js" target="head" />
place you JS folder under the resources folder in your WebContent folder
You should also read this What is the JSF resource library for and how should it be used?
Related
thank you for your support.
I created a form with select options. The fields are filled with arrays provided with the settings variable.
The field in __trustedProperties quoted with the "-sign. This results in "{" as hash.
[__trustedProperties]" value="{"newRfichip":{"id":1,"status":1,"location":1,"personid":1}}2ec7e718db7f0844040e31baaa69a8452a650302" />
Normaly there should be & quot; instead the "-sign.
[__trustedProperties]" value="{& quot;newRfichip& quot;:{& quot;id& quot;:1,& quot;status& quot;:1,& quot;location& quot;:1,& quot;personid& quot;:1}}2ec7e718db7f0844040e31baaa69a8452a650302" />
I get always an exception 'The HMAC of the form could not be validated.'
I'm grateful for every hint, how i can solve this problem
FormFields.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<label for="id">
<f:translate key="tx_bbaorfichip_domain_model_rfichip.id" />
</label><br />
<f:form.textfield property="id" id="id" /><br />
<br\>
<f:debug>{_all}</f:debug>
<f:debug>{__trustedProperties}</f:debug>
<br\>
<label for="status">
<f:translate key="tx_bbaorfichip_domain_model_rfichip.status" />
</label><br />
<f:form.select property="status" id="status"
options="{settings.stati}"
value="4"
optionValueField="status"
optionLabelField="status" />
<br />
<label for="location">
<f:translate key="tx_bbaorfichip_domain_model_rfichip.location" />
</label><br />
<f:form.select property="location" id="location"
options="{settings.location}"
value="4"
optionValueField="location"
optionLabelField="location" />
<br />
<label for="personid">
<f:translate key="tx_bbaorfichip_domain_model_rfichip.personid" />
</label><br />
<f:form.select property="personid" id="personid"
options="{settings.personid}"
optionValueField="personid"
optionLabelField="personid" />
<br />
</html>
I'm working on a JSF project, all is working fine for the moment except for one thing: when I select a page from the left side bar, it is loaded correctly, when I click on a button, the button stays pressed but the action is not called.
button pressed but no action called
When I refresh the page and press it again, it works fine.
This happens to the other pages too.
Do you have any idea why is this happening ?!
I'm here to provide more details if needed!
The managed bean name and scope:
#ManagedBean(name="ModerateurBean")
#SessionScoped
The code of one of my pages:
<ui:composition template="template/default/main.xhtml"
xmlns="http://www.w3.org/1999/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"
xmlns:b="http://bootsfaces.net/ui"
>
<ui:define name="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:commandButton process="singleDT" update=":form:ajouter" icon="ui-icon-plus" value="Ajouter" oncomplete="PF('ajouterDialog').show()" />
<p:dataTable id="singleDT" var="o" value="#{ModerateurBean.listMod}" selectionMode="single" selection="#{ModerateurBean.selectedModerateur}" rowKey="#{o.id_personne}" valueChangeListener="#{ModerateurBean.valChanged}" onchange="submit()">
<p:column headerText="Nom ">
<h:outputText value="#{o.nom}" />
</p:column>
<p:column headerText="Prénom ">
<h:outputText value="#{o.prenom}" />
</p:column>
<p:column headerText="Cin ">
<h:outputText value="#{o.cin}" />
</p:column>
<p:column headerText="Adresse ">
<h:outputText value="#{o.adresse}" />
</p:column>
<p:column headerText="Numéro Téléphone ">
<h:outputText value="#{o.numtel}" />
</p:column>
</p:dataTable>
<p:commandButton process="singleDT" update=":form:voir" icon="ui-icon-search" value="Voir" oncomplete="PF('voirDialog').show()" />
<p:commandButton process="singleDT" update=":form:modifier" icon="ui-icon-pencil" value="Modifier" oncomplete="PF('modifierDialog').show()" />
<p:commandButton process="singleDT" update=":form:supprimer" icon="ui-icon-trash" value="Supprimer" oncomplete="PF('supprimerDialog').show()" />
<!-- dialog voir admin -->
<p:dialog header="Details administrateur" widgetVar="voirDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="voir" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Nom" style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.prenom}" />
<h:outputText value="Cin " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.cin}" />
<h:outputText value="Adresse " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.adresse}" />
<h:outputText value="Numéro Téléphone " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.numtel}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
<!-- dialog modifier moderateur -->
<p:dialog header="Modifier moderateur" widgetVar="modifierDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="modifier" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Nom" style="color:black" />
<p:inputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black" />
<p:inputText value="#{ModerateurBean.selectedModerateur.prenom}" />
<h:outputText value="Cin " style="color:black"/>
<p:inputText value="#{ModerateurBean.selectedModerateur.cin}" />
<h:outputText value="Adresse " style="color:black" />
<p:inputTextarea rows="6" cols="33" value="#{ModerateurBean.selectedModerateur.adresse}"/>
<h:outputText value="Numéro Téléphone " style="color:black" />
<p:inputMask id="phoneWithExt18" value="#{ModerateurBean.selectedModerateur.numtel}" mask="(999) 999-9999? x99999"/>
</p:panelGrid>
</p:outputPanel>
<p:commandButton action="#{ModerateurBean.ModifierModerateur}" icon="ui-icon-pencil" value="Modifier" update="#form" />
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('modifierDialog').hide()" />
</p:dialog>
<!-- dialog ajouter moderateur -->
<p:dialog header="Ajouter moderateur" widgetVar="ajouterDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="ajouter" style="text-align:center;">
<p:panelGrid columns="2" columnClasses="label,value">
<h:outputText value="Nom" style="color:black" />
<p:inputText value="#{ModerateurBean.nom}" />
<h:outputText value="Prénom " style="color:black" />
<p:inputText value="#{ModerateurBean.prenom}" />
<h:outputText value="Sexe " for="sexe" style="color:black" />
<p:selectOneMenu id="sexe" value="#{ModerateurBean.sexe}">
<f:selectItem itemValue="" itemLabel=" --selectionnez-- "></f:selectItem>
<f:selectItem itemValue="1" itemLabel="Homme"></f:selectItem>
<f:selectItem itemValue="2" itemLabel="Femme"></f:selectItem>
</p:selectOneMenu>
<h:outputText value="Cin " style="color:black" />
<p:inputText value="#{ModerateurBean.cin}" />
<h:outputText value="Adresse " style="color:black"/>
<p:inputTextarea rows="6" cols="33" vvalue="#{ModerateurBean.adresse}"/>
<h:outputText value="Numéro Téléphone " style="color:black" />
<p:inputMask id="phoneWithExt1" value="#{ModerateurBean.numtel}" mask="(999) 999-9999? x99999"/>
</p:panelGrid>
</p:outputPanel>
<p:commandButton update="#form" icon="ui-icon-check" value="Sauvegarder" action="#{ModerateurBean.AjouterModerateur}" oncomplete="PF('ajouterDialog').hide()" >
<f:ajax render="singleDT" update="#form"/></p:commandButton>
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('ajouterDialog').hide()" />
</p:dialog>
<!-- dialog supprimer moderateur -->
<p:dialog header="Supprimer moderateur" widgetVar="supprimerDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="supprimer" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Id " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.id_personne}" />
<h:outputText value="Nom" style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.prenom}" />
</p:panelGrid>
</p:outputPanel>
<p:commandButton value="Supprimer" action="#{ModerateurBean.SupprimerModerateur}" icon="ui-icon-trash" oncomplete="PF('supprimerDialog').hide()" update="#form" >
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('supprimerDialog').hide()" />
<p:confirm header="Confirmation" message="Etes vous sur?" icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Non" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:dialog>
</h:form>
</div>
</div>
</div>
</ui:define>
</ui:composition>
The images : image 1
image 2
image 3
image 4 : When i click on a button
Resume of the problem :
My problem was that when i click on a button it stays pressed but when i refresh the page it starts working normaly.
The solution :
i am working with facelets, so i have a template as you can see it here template structure
In main.xhtml i gather them and define styesheets and scripts in the head section, i work also with primefaces 6.x.
After i investagated in the console of Chrome Console of Chrome , the googlable errors stated that the probleme was in the conflict between primefaces and jquery that i manualy added.
what i did is remove all the jquery scripts and it started working again.
see the diffrence in the two codes :
main.xhtml (before)
<?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:b="http://bootsfaces.net/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>App Gestion d'Absence</title>
</f:facet>
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="bootstrap/css/bootstrap.min.css" />
<h:outputStylesheet name="css/dashboard.css" />
<h:outputStylesheet name="metisMenu/metisMenu.min.css" />
<h:outputStylesheet name="bootstrap/css/sb-admin-2.css" />
<h:outputStylesheet name="morrisjs/morris.css" />
<h:outputStylesheet name="morrisjs/morris.min.js" />
<h:outputStylesheet name="morrisjs/morris.js" />
<h:outputStylesheet name="font-awesome/css/font-awesome.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
<h:outputStylesheet name="vendor/morrisjs/morris.css"/>
<!-- <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
<!-- jQuery -->
<h:outputScript library="bootstrap" name="bootstrap.js" />
<h:outputScript library="bootstrap" name="bootstrap.min.js" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h:outputScript library="js" name="sb-admin-2.js" />
<h:outputScript library="js" name="sb-admin-2.min.js" />
</f:facet>
<f:facet name="last">
</f:facet>
</h:head>
<h:body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="leftMenu">
<ui:insert name="leftMenu">
<ui:include src="leftMenu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
<!-- <div>
<ui:include src="content.xhtml"/>
</div> -->
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</html>
main.xhtml (after)
<?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:b="http://bootsfaces.net/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gestion Absence ISMO</title>
</f:facet>
<link rel="shortcut icon" href="#{resources['images/favicon.ico']}" type="image/x-icon" />
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="css/dashboard.css" />
<h:outputStylesheet name="bootstrap/css/sb-admin-2.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
<!-- <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />
<h:outputScript name="bootstrap/js/bootstrap.js" />
</f:facet>
<f:facet name="last">
</f:facet>
</h:head>
<h:body>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="leftMenu">
<ui:insert name="leftMenu">
<ui:include src="leftMenu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
<!-- <div>
<ui:include src="content.xhtml"/>
</div> -->
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</html>
i hope this will help someone :)
After carrying on a project of a colleague of mine I'm facing some problems with a little dialogue. I was asked to copy a component and give it a new name. But there started the problem: I was able to build the dialogue and sending the component to my backing bean (unfortunately a SessionScoped one), also the new name found its way and saving is working too BUT the save button of my dialogue shows some weird behaviour. And as the code will show I have tried a lot of variants for it (with different results, described in the comments above them).
At the end I simply want three little things: get the JSF lifecycle only called once, a working required for my inputText-field and a still usable view after successful saving.
If you need more code e.g of the composite components starting with bal or of the backing bean, just drop a note and I will take care of it.
I'm aware of the fact that fetching the data every time from the database is bad style in ui:repeat, but I haven't seen a different way with the SessionScoped-Bean I have to work with (ViewScoped would for sure be better here, but time changing it, is, like always, not there).
Here is my code, using Primefaces 5.3 and the current version of Bootsfaces:
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:b="http://bootsfaces.net/ui"
xmlns:bal="http://java.sun.com/jsf/composite/bal/components">
<ui:composition template="/template/main.xhtml">
<ui:define name="content">
<bal:pageHeading title="#{msg.menu_settings} » #{msg.menu_components}">
<h:form>
<div class="btn-group pull-right">
<b:commandButton look="link" styleClass="as-link" size="lg" action="#{componentController.createCategory()}" value="#{msg.create_category}" title="#{msg.create_category}" iconAwesome="plus-circle" />
</div>
</h:form>
</bal:pageHeading>
<bal:row id="panelRow">
<h:form id="masterForm">
<ui:repeat value="#{componentController.getComponentcategoryListByCompany(loginController.company)}" var="componentcategory">
<bal:panel title="#{componentcategory.name}" description="#{componentcategory.description}" expanded="false" id="categoryForm">
<f:facet name="tools">
<b:commandButton look="link" styleClass="as-link" action="#{componentController.createComponent(componentcategory)}" value="#{msg.create_component}" title="#{msg.create_component}" size="md" iconAwesome="plus-circle" immediate="true" />
</f:facet>
<ul class="list-unstyled">
<ui:repeat value="#{componentcategory.componentList}" var="componentItem">
<li class="list-group-item">
<div class="row">
<div class="col-sm-7 name-col">#{componentItem.name}</div>
<div class="col-sm-5 text-right">
<b:buttonGroup>
<p:commandButton styleClass="btn btn-link as-link" style="float: left;" value="#{msg.copy_component}" title="#{msg.copy_component}" icon="fa fa-files-o" >
<p:ajax listener="#{componentController.sendComponentToCopy(componentItem)}" oncomplete="PF('copyComponentDialog').show()" process="panelRow:masterForm" partialSubmit="true" />
</p:commandButton>
</b:buttonGroup>
</div>
</div>
</li>
</ui:repeat>
<ui:fragment rendered="#{empty componentcategory.componentList}">
<li class="list-group-item list-group-item-info">#{msg.no_components_available}</li>
</ui:fragment>
</ul>
</bal:panel>
</ui:repeat>
<ui:fragment rendered="#{empty componentController.getComponentcategoryListByCompany(loginController.company)}">
<ul class="list-unstyled">
<li class="list-group-item list-group-item-info">#{msg.no_categories_available}</li>
</ul>
</ui:fragment>
</h:form>
</bal:row>
<p:dialog id="dlg" widgetVar="copyComponentDialog" resizable="false" draggable="false" showEffect="fade" hideEffect="fade" modal="true">
<h:form id="dlgForm" prependId="false">
<bal:panel id="copy_component_view" title="#{msg.copy_component}" styleClass="form-panel" collapsible="false">
<b:message for="name" showSummary="false"/>
<b:inputText value="#{componentController.copiedComponentName}" id="name" label="#{msg.name}" fieldSize="sm" required="true" requiredMessage="#{msg.name_required}" />
<bal:panel id="buttons">
<bal:row id="row" colStyleClass="btn-group">
<ui:remove>
<!-- Required works - After saving panels are no longer toggleable - JSF-lifecycle called twice -->
<p:commandButton value="#{msg.save}" styleClass="btn btn-primary" icon="fa fa-check">
<p:ajax listener="#{componentController.copyComponent()}" partialSubmit="true" process="copy_component_view" update="copy_component_view :panelRow:masterForm" oncomplete="if(!args.validationFailed) PF('copyComponentDialog').hide()" />
</p:commandButton>
<!-- Required doesn't work - After saving panels are toggleable, but view not updated - JSF-lifecycle called twice -->
<p:commandButton value="#{msg.save}" styleClass="btn btn-primary" icon="fa fa-check" ajax="false">
<p:ajax listener="#{componentController.copyComponent()}" partialSubmit="true" process="copy_component_view" update="copy_component_view :panelRow:masterForm" oncomplete="if(!args.validationFailed) PF('copyComponentDialog').hide()" />
</p:commandButton>
<!-- Required works - After saving panels are no longer toggleable - JSF-lifecycle called twice -->
<p:commandButton value="#{msg.save}" styleClass="btn btn-primary" icon="fa fa-check" actionListener="#{componentController.copyComponent()}" partialSubmit="true" process="copy_component_view" update="copy_component_view :panelRow:masterForm" oncomplete="if(!args.validationFailed) PF('copyComponentDialog').hide()" />
<!-- Required works - After saving panels are no longer toggleable - JSF-lifecycle called once -->
<p:commandButton value="#{msg.save}" styleClass="btn btn-primary" icon="fa fa-check" action="#{componentController.copyComponent()}" partialSubmit="true" process="copy_component_view" update="copy_component_view :panelRow:masterForm" oncomplete="if(!args.validationFailed) PF('copyComponentDialog').hide()" />
<!-- Required doesn't work - After saving panels are toggleable, view updated - JSF-lifecycle called once -->
<p:commandButton value="#{msg.save}" styleClass="btn btn-primary" icon="fa fa-check" ajax="false" action="#{componentController.copyComponent()}" partialSubmit="true" process="copy_component_view" update="copy_component_view :panelRow:masterForm" oncomplete="if(!args.validationFailed) PF('copyComponentDialog').hide()" />
<!-- Required works - After saving panels are no longer toggleable - JSF-lifecycle called once -->
<p:commandButton value="#{msg.save}" styleClass="btn btn-primary" icon="fa fa-check" partialSubmit="true" process="copy_component_view" update="copy_component_view :panelRow:masterForm" oncomplete="if(!args.validationFailed) PF('copyComponentDialog').hide()">
<f:actionListener binding="#{componentController.copyComponent()}" />
</p:commandButton>
<!-- Required doesn't work - After saving panels are toggleable, view updated - JSF-lifecycle called once -->
<p:commandButton value="#{msg.save}" styleClass="btn btn-primary" icon="fa fa-check" ajax="false" partialSubmit="true" process="copy_component_view" update="copy_component_view :panelRow:masterForm" oncomplete="if(!args.validationFailed) PF('copyComponentDialog').hide()">
<f:actionListener binding="#{componentController.copyComponent()}" />
</p:commandButton>
<!-- Required works - After saving panels are no longer toggleable - JSF-lifecycle called once -->
<p:commandButton value="#{msg.save}" styleClass="btn btn-primary" icon="fa fa-check" partialSubmit="true" process="copy_component_view" update="copy_component_view :panelRow:masterForm" oncomplete="if(!args.validationFailed) PF('copyComponentDialog').hide()">
<f:actionListener binding="#{componentController.copyComponent()}" />
</p:commandButton>
</ui:remove>
<!-- Required doesn't work- After saving panels are toggleable, view updated - JSF-lifecycle called once -->
<p:commandButton value="#{msg.save}" styleClass="btn btn-primary" icon="fa fa-check" ajax="false" actionListener="#{componentController.copyComponent()}" partialSubmit="true" process="copy_component_view" update="copy_component_view :panelRow:masterForm" oncomplete="if(!args.validationFailed) PF('copyComponentDialog').hide()" />
<b:commandButton value="#{msg.cancel}" iconAwesome="close" look="default" immediate="true" onclick="PF('copyComponentDialog').hide()" />
</bal:row>
</bal:panel>
</bal:panel>
</h:form>
</p:dialog>
</ui:define>
</ui:composition>
</html>
Edit:
Just some additional information concerning bal:panel:
<?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:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<!-- INTERFACE -->
<cc:interface>
<cc:attribute name="title" type="java.lang.String" />
<cc:attribute name="description" type="java.lang.String" />
<cc:attribute name="subtitle" type="java.lang.String" />
<cc:attribute name="subtitle" type="java.lang.String" />
<cc:attribute name="leftFooter" type="java.lang.String"/>
<cc:attribute name="rightFooter" type="java.lang.String" />
<cc:attribute name="closable" type="java.lang.Boolean" default="false" />
<cc:attribute name="collapsible" type="java.lang.Boolean" default="true" />
<cc:attribute name="expanded" type="java.lang.Boolean" default="true" />
<cc:attribute name="styleClass" type="java.lang.String" />
<cc:attribute name="style" type="java.lang.String" />
<cc:attribute name="titleStyle" type="java.lang.String" />
<cc:attribute name="labelValue" />
<cc:attribute name="labelLook" default="plain"/>
<cc:attribute name="labelStyleClass" />
<cc:attribute name="labelStyle" />
<cc:facet name="tools" />
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<div id="#{cc.clientId}" class="ibox float-e-margins #{!cc.attrs.expanded?'border-bottom':''} #{cc.attrs.styleClass}" style="#{cc.attrs.style?cc.attrs.style:''}">
<ui:fragment rendered="#{not empty cc.attrs.title}">
<div class="ibox-title" style="#{not empty cc.attrs.titleStyle?cc.attrs.titleStyle:''}">
<span class="name-col">
<span>
<h5>#{cc.attrs.title}
<ui:fragment rendered="#{not empty cc.attrs.subtitle}">
<small class="m-l-sm">#{cc.attrs.subtitle}</small>
</ui:fragment>
<ui:fragment rendered="#{not empty cc.attrs.description}">
<h:outputLink value="" styleClass="ui-commandlink ui-widget btn-md">
<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="auto" data-original-title="#{cc.attrs.description}" />
</h:outputLink>
</ui:fragment>
</h5>
<ui:fragment rendered="#{not empty cc.attrs.labelValue}">
<span class="label label-#{cc.attrs.labelLook} #{cc.attrs.labelStyleClass}" style="#{cc.attrs.labelStyle}">#{cc.attrs.labelValue}</span>
</ui:fragment>
</span>
</span>
<div class="ibox-tools">
<cc:renderFacet name="tools" />
<ui:fragment rendered="#{cc.attrs.collapsible eq true}">
<a class="collapse-link">
<i class="#{!cc.attrs.expanded?'fa fa-chevron-down':'fa fa-chevron-up'}"></i>
</a>
</ui:fragment>
<ui:fragment rendered="#{cc.attrs.closable eq true}">
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</ui:fragment>
</div>
</div>
</ui:fragment>
<c:if test="#{cc.childCount gt 0}">
<div class="ibox-content" style="display: #{!cc.attrs.expanded and cc.attrs.collapsible?'none':'block'};">
<cc:insertChildren />
</div>
</c:if>
<ui:fragment rendered="#{not empty cc.attrs.leftFooter or not empty cc.attrs.rightFooter}">
<div class="ibox-footer">
<ui:fragment rendered="#{not empty cc.attrs.rightFooter}">
<span class="pull-right">
#{cc.attrs.rightFooter}
</span>
</ui:fragment>
<ui:fragment rendered="#{not empty cc.attrs.leftFooter}">
#{cc.attrs.leftFooter}
</ui:fragment>
</div>
</ui:fragment>
</div>
</cc:implementation>
</html>
and bal:row:
<?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:cc="http://xmlns.jcp.org/jsf/composite">
<!-- INTERFACE -->
<cc:interface>
<cc:attribute name="colStyleClass" type="java.lang.String" />
<cc:attribute name="rowStyleClass" type="java.lang.String" />
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<div id="#{cc.clientId}" class="row #{cc.attrs.rowStyleClass}" >
<div class="col-lg-12 #{cc.attrs.colStyleClass}">
<cc:insertChildren />
</div>
</div>
</cc:implementation>
</html>
I am trying to give my website (created using JSF 2) a custom login from using Spring Security. When I use the default login form, the website works fine. However, when I try to use my own custom login form, I am always directed to my authentication-failure-url, even when I type the correct username/password. Does anyone know why this is or how I can fix it? My code is below.
security-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans
xmlns:sec="http://www.springframework.org/schema/security"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/security
http://www.springframework.org/schema/security/spring-security-3.1.xsd">
<sec:http auto-config="true" use-expressions="true">
<sec:intercept-url pattern="/login.jsf" access="isAnonymous()" />
<sec:intercept-url pattern="/pages/secure/**" access="hasRole('ROLE_USER')" />
<sec:intercept-url pattern="/pages/home/**" access="hasRole('ROLE_USER')" />
<sec:intercept-url pattern="/pages/unsecure/**" access="permitAll"/>
<sec:form-login login-page="/login.jsf" default-target-url="/pages/home/home.jsf"
authentication-failure-url="/fail.jsf"/>
</sec:http>
<sec:authentication-manager alias="authenticationManager">
<sec:authentication-provider>
<sec:user-service>
<sec:user authorities="ROLE_USER" name="admin" password="admin" />
</sec:user-service>
</sec:authentication-provider>
</sec:authentication-manager>
</beans:beans>
login.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Login</title>
<h:outputStylesheet name="css/styles.css" />
<h:outputScript name="jquery/jquery-plugins.js" library="primefaces" />
</h:head>
<h:body>
<div class="login">
<form method="POST" action="j_spring_security_check">
<h:inputText name="j_username" id="username"></h:inputText>
<p:watermark for="username" value="Username" />
<br />
<h:inputSecret name="j_password" id="password">
</h:inputSecret>
<p:watermark for="password" value="Password" />
<br />
<h:commandButton name="submit" type="submit" value="Submit"></h:commandButton>
</form>
</div>
</h:body>
</html>
Have you looked at the generated HTML output? Rightclick page in browser, do View Source to see it.
The name attribute of
<h:inputText name="j_username" id="username"></h:inputText>
<h:inputSecret name="j_password" id="password"></h:inputSecret>
isn't been generated at all! Instead, the client ID represents the element's name.
Fix it accordingly:
<h:inputText id="j_username" />
<p:watermark for="j_username" value="Username" />
<h:inputSecret id="j_password" />
<p:watermark for="j_password" value="Password" />
You could of course also just use plain vanilla HTML:
<input type="text" name="j_username" placeholder="Username" />
<input type="password" name="j_password" placeholder="Password" />
Try setting the following as action of the form.
action="#{request.contextPath}/j_spring_security_check"
As said in this question's answer :
"Components which uses Ajax. If you don't need it, disable Ajax"
a p:schedual isn't displayed if there are others components with an f:ajax in the same page.
i noticed that if these components are written in the code after the schedual, the latter can be displayed but these components do not respond to user interactions anymore (I've an example of code in a previous question i've asked).
So, what if i "need them to work" ? is the schedual designed to work only alone and disable other components to share the ajax functionalities with it ?!
This the code in which i used the schedual :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="CSS/general.css" type="text/css" />
<link rel="stylesheet" href="CSS/jquery-ui-1.10.0.custom.min.css"
type="text/css" />
<script src="JS/jquery-ui-1.10.0.custom.js" />
<script src="JS/jquery.flip.js" />
<script src="JS/jquerygen.js" />
<title>my app</title>
</h:head>
<body>
<f:view>
<h:form id="form1">
<h:panelGroup id="windsarea" layout="block">
<h:panelGroup id="gesevntsincl" layout="block">
<p:growl id="messages" showDetail="true" />
<p:schedule id="schedule" value="#{scheduleController.eventModel}"
widgetVar="myschedule">
<p:ajax event="dateSelect"
listener="#{scheduleController.onDateSelect}"
update="eventDetails" oncomplete="eventDialog.show()" />
<p:ajax event="eventSelect"
listener="#{scheduleController.onEventSelect}"
update="eventDetails" oncomplete="eventDialog.show()" />
<p:ajax event="eventMove"
listener="#{scheduleController.onEventMove}" update="messages" />
<p:ajax event="eventResize"
listener="#{scheduleController.onEventResize}" update="messages" />
</p:schedule>
<p:dialog widgetVar="eventDialog" header="Event Details"
showEffect="clip" hideEffect="clip">
<h:panelGrid id="eventDetails" columns="2">
<h:outputLabel for="title" value="Title:" />
<p:inputText id="title" value="#{scheduleController.event.title}"
required="true" />
<h:outputLabel for="from" value="From:" />
<p:inputMask id="from"
value="#{scheduleController.event.startDate}" mask="99/99/9999">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputMask>
<h:outputLabel for="to" value="To:" />
<p:inputMask id="to" value="#{scheduleController.event.endDate}"
mask="99/99/9999">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputMask>
<h:outputLabel for="allDay" value="All Day:" />
<h:selectBooleanCheckbox id="allDay"
value="#{scheduleController.event.allDay}" />
<p:commandButton type="reset" value="Reset" />
<p:commandButton id="addButton" value="Save"
actionListener="#{scheduleController.addEvent}"
oncomplete="myschedule.update();eventDialog.hide();" />
</h:panelGrid>
</p:dialog>
</h:panelGroup>
</h:panelGroup>
<div id="tasksbar" />
<div id="startbutn" />
<h:panelGroup id="startmenudiv">
<h:panelGroup id="substartmenudiv" />
</h:panelGroup>
<div style="visibility: hidden;">
<BR />
<BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR />
<BR />
</div>
<div id="loginbackground" />
<div id="logindivflip">
<div id="logindiv">
<br />
<div class="hidden" style="font-weight: 900;">Welcome,please
authentificate :</div>
<br />
<div class="hidden">
<h:outputText value="login :" />
<h:inputText class="rounded" value="#{userBean.login}" />
</div>
<br /> <br />
<div class="hidden">
<h:outputText value="password :" />
<h:inputText class="rounded" value="#{userBean.pwd}" />
</div>
<br /> <br />
<div class="hidden">
<span class="ebbtn"> <a id="logsubmitbtn" href=""
title="Reset" onclick="">Submit <f:ajax event="click"
execute="#this" listener="#{userBean.verifierUserDsLdap}" />
</a> <a id="resetbtn" href="" title="Reset" onclick="">Reset</a>
</span>
</div>
</div>
<div id="loginphoto" />
</div>
<p:remoteCommand name="addNewWindow"
actionListener="#{userBean.addNewWindow}">
<f:param name="windowname" />
</p:remoteCommand>
<p:remoteCommand name="updatewinstylprops"
actionListener="#{userBean.updatewinstylprops}">
<f:param name="windowid" />
<f:param name="top" />
<f:param name="left" />
<f:param name="width" />
<f:param name="height" />
</p:remoteCommand>
</h:form>
</f:view>
</body>
</html>
THanks for help!