Show Custom messages below or next field - primefaces

Presently I am showing error messages at top location. But I want to show at place where i want i.e. near field. means error message for user name must be near to it.
When i am placing that tag there than it is showing null resource error.
<!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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Prime Faces Demo</title>
<link rel="stylesheet" href="second.css" type="text/css" />
</head>
<body>
<h:body>
<f:view>
<f:loadBundle var="mg" basename="messages1"></f:loadBundle>
<h:message for="firstname" style="color:red"></h:message>
<br></br>
<h:message for="lastname" style="color:red"></h:message>
<br></br>
<h:message for="pass" style="color:red"></h:message>
<br></br>
<h:message for="date" style="color:red"></h:message>
<br></br>
<h:message for="cpass" style="color:red"></h:message>
<br></br>
<h:message for="gender" style="color:red"></h:message>
<br></br>
<h:message for="nation" style="color:red"></h:message>
<br></br>
<h:message for="faci" style="color:red"></h:message>
<br></br>
<h:message for="padd" style="color:red"></h:message>
<br></br>
<h:message for="tadd" style="color:red"></h:message>
<br></br>
<h:message for="email" style="color:red"></h:message>
<br></br>
<h:message for="phone" style="color:red"></h:message>
<br></br>
<h:message for="quali" style="color:red"></h:message>
<br></br>
<h:message for="state" style="color:red"></h:message>
<br></br>
<h:message for="hobby" style="color:red"></h:message>
<br></br>
<h:message for="zone" style="color:red"></h:message>
<br></br>
<h:form>
<h:panelGrid columns="2" width="1000">
<h:panelGrid columns="2" width="600">
<p:outputLabel value="Enter first name" style="font-weight:bold"></p:outputLabel>
<h:inputText requiredMessage="#{mg.firstname}" value="#{Userdeatil.firstname}"
required="true" id="firstname">
</h:inputText>
<p:outputLabel value="Enter last name" style="font-weight:bold" ></p:outputLabel>
<h:inputText requiredMessage="#{mg.lastname}" value="#{Userdeatil.lastname}"
required="true" id="lastname">
</h:inputText>
<p:outputLabel value="Enter password" style="font-weight:bold"></p:outputLabel>
<p:password value="#{Userdeatil.password}" required="true" requiredMessage="#{mg.password}" id="pass"></p:password>
<p:outputLabel value="ReEnter password" style="font-weight:bold"></p:outputLabel>
<p:password value="#{Userdeatil.conpassword}" required="true" requiredMessage="#{mg.confrom}" id="cpass"></p:password>
<p:outputLabel value="Enter Date of Birth" style="font-weight:bold"></p:outputLabel>
<h:inputText requiredMessage="#{mg.birth}" value="#{Userdeatil.dob}"
required="true" id="date">
</h:inputText>
<p:outputLabel value="Select Gender" style="font-weight:bold" ></p:outputLabel>
<p:selectOneRadio value="#{Userdeatil.gender}" required="true" id="gender" requiredMessage="#{mg.gender}">
<f:selectItem itemValue="male" itemLabel="Male"></f:selectItem>
<f:selectItem itemValue="female" itemLabel="Female"></f:selectItem>
</p:selectOneRadio >
<p:outputLabel value="Select Nationality" style="font-weight:bold"></p:outputLabel>
<p:selectOneRadio value="#{Userdeatil.nation}" required="true" id="nation" requiredMessage="#{mg.nation}" >
<f:selectItem itemValue="indian" itemLabel="Indian"></f:selectItem>
<f:selectItem itemValue="nonindian" itemLabel="NonIndian"></f:selectItem>
<f:selectItem itemValue="nri" itemLabel="NRI"></f:selectItem>
</p:selectOneRadio >
<p:outputLabel value="Select Account Facilities" style="font-weight:bold" ></p:outputLabel>
<h:selectManyCheckbox required="true" id="faci" requiredMessage="#{mg.faci}">
<f:selectItem itemValue="1" itemLabel="Online banking"></f:selectItem>
<f:selectItem itemValue="2" itemLabel="Credit Card"></f:selectItem>
<f:selectItem itemValue="3" itemLabel="Debit Card"></f:selectItem>
<f:selectItem itemValue="4" itemLabel="All"></f:selectItem>
</h:selectManyCheckbox>
<p:outputLabel value="Permanent Address" style="font-weight:bold"></p:outputLabel>
<p:inputTextarea value="#{Userdeatil.tadd}" required="true" id="padd" requiredMessage="#{mg.padd}"></p:inputTextarea>
<p:outputLabel value="Temporary Address" style="font-weight:bold"></p:outputLabel>
<p:inputTextarea value="#{Userdeatil.padd}" required="true" id="tadd" requiredMessage="#{mg.tadd}"></p:inputTextarea>
<p:outputLabel value="Select if both are same" style="font-weight:bold"></p:outputLabel>
<p:selectBooleanCheckbox value="#{Userdeatil.same}"></p:selectBooleanCheckbox>
<p:outputLabel value="Select Zone" style="font-weight:bold"></p:outputLabel>
<h:selectOneMenu value="#{Userdeatil.zone}" id="zone" requiredMessage="#{mg.zone}">
<f:selectItem itemLabel="Northern" itemValue="" />
<f:selectItem itemLabel="Western"></f:selectItem>
<f:selectItem itemLabel="Eastern"></f:selectItem>
<f:selectItem itemLabel="Southern"></f:selectItem>
<f:selectItem itemLabel="Central"></f:selectItem>
</h:selectOneMenu>
<p:commandButton value="Submit" action="#{Userdeatil.check}"/>
</h:panelGrid>
<h:panelGrid columns="2" >
<p:outputLabel value="Enter email" style="font-weight:bold"></p:outputLabel>
<p:inputText value="#{Userdeatil.email}" required="true" id="email" requiredMessage="#{mg.email}">
</p:inputText>
<p:outputLabel value="Enter phone number" style="font-weight:bold" ></p:outputLabel>
<p:inputText value="#{Userdeatil.phone}" required="true" id="phone" requiredMessage="#{mg.phone}"></p:inputText>
<p:outputLabel value="Enter qualification" style="font-weight:bold"></p:outputLabel>
<p:inputText value="#{Userdeatil.quali}" required="true" id="quali" requiredMessage="#{mg.quali}"></p:inputText>
<p:outputLabel value="Enter State" style="font-weight:bold"></p:outputLabel>
<p:inputText value="#{Userdeatil.state}" required="true" id="state" requiredMessage="#{mg.state}"></p:inputText>
<p:outputLabel value="Enter Hobby" style="font-weight:bold"></p:outputLabel>
<p:inputMask value="#{Userdeatil.hobbey}" required="true" id="hobby" requiredMessage="#{mg.hobby}"/>
</h:panelGrid>
</h:panelGrid>
</h:form>
</f:view>
</h:body>
</body>
</html>

Related

p:dataScroller works only for the last element

I am trying to use dataScroller to show elements of a database table. It shows all the elements correctly but when I try to use some actions it only works for the last element like:
<p:commandButton value="vote"
action="#{avisBean.updateAvis(in,email)}">
and
<p:commandButton value="commenter" icon="ui-icon-check"
action="#{avisBean.addAvis(in,email)}">`
and for the others nothings enters to the database just empty string. How can I correct this?
This is the code:
<h:form id="commandLink">
<p:dataScroller value="#{ideeBean.idees}" var="in" chunkSize="10"
mode="inline" scrollHeight="500">
<f:facet name="header">
Les Idées
</f:facet>
<h:panelGrid columns="1" style="width:100%"
columnClasses="logo,detail">
<!-- <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> -->
<p:outputPanel>
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="#{msg['idee.titre']}" />
<h:outputText value="#{in.titre}" style="font-weight: bold" />
<h:outputText value="#{msg['idee.description']}" />
<h:outputText value="#{in.description}"
style="font-weight: bold" />
<h:outputText value="#{msg['idee.theme']}" />
<h:outputText value="#{in.theme}" style="font-weight: bold" />
<h:outputText value="#{msg['idee.type']}" />
<h:outputText value="#{in.type}" style="font-weight: bold" />
<!-- *******************Rating**************** -->
</h:panelGrid>
</p:outputPanel>
<h:panelGrid columns="4" cellpadding="5">
<p:commandButton value="details"
action="details?faces-redirect=true"
actionListener="#{ideeBean.attrListener}">
<f:attribute name="idee" value="#{in}" />
</p:commandButton>
<!--************************************** -->
<p:selectOneMenu id="console" value="#{avisBean.avis.score}"
style="width:125px" converter="javax.faces.Integer">
<f:convertNumber integerOnly="true" />
<f:selectItem itemLabel="Choisir" itemValue="" />
<f:selectItem itemLabel="Horrible" itemValue="1" />
<f:selectItem itemLabel="médiocre" itemValue="2" />
<f:selectItem itemLabel="Bon" itemValue="3" />
<f:selectItem itemLabel="Trés Bon" itemValue="4" />
<f:selectItem itemLabel="Excellent" itemValue="5" />
</p:selectOneMenu>
<p:commandButton value="vote"
action="#{avisBean.updateAvis(in,email)}">
</p:commandButton>
</h:panelGrid>
<!-- ***************************comments******************** -->
<p:dataScroller id="growl"
value="#{ideeBean.getAllAvisList(in.id)}" var="a" chunkSize="2">
<f:facet name="header">
commentaires
</f:facet>
<f:facet name="loader">
<p:commandButton type="button" value="Plus"
icon="ui-icon-circle-triangle-s" />
</f:facet>
<h:panelGrid columns="1">
<!-- <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> -->
<p:outputPanel>
<h:panelGrid columns="4" cellpadding="5">
<h:outputText value="#{a.user_avis.nom}" />
<p:inplace id="ajax" editor="true">
<p:ajax event="save" listener="#{avisBean.updateAvis(a)}" />
<h:inputText value="#{a.commentaire}"
style="font-weight: bold" rendered="#{not empty a.commentaire}" />
</p:inplace>
<p:commandButton value="Supprimer"
action="#{ideeBean.deleteAvisById(in.id,a.id)}"
icon="ui-icon-arrowrefresh-1-w"
rendered="#{utilisateurBean.getAllAvis(a,userid)}">
<f:param name="userid" value="#{loginBean.id}"></f:param>
</p:commandButton>
</h:panelGrid>
</p:outputPanel>
</h:panelGrid>
</p:dataScroller>
<!-- ***************************************** -->
<h:panelGrid columns="1">
<p:inputTextarea rows="2" cols="50" id="comment"
value="#{avisBean.avis.commentaire}" />
<p:commandButton value="commenter" icon="ui-icon-check"
action="#{avisBean.addAvis(in,email)}">
<f:param name="email" value="#{loginBean.email}"></f:param>
</p:commandButton>
</h:panelGrid>
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="resources/images/separateurr.png" />
</h:panelGrid>
</h:panelGrid>
</p:dataScroller>
</h:form>

Primefaces Calendar Style Issue

I am using primefaces calendar in my project and i placed p:spinner
under calendar component.When ever i click the calendar component it
will pop up and shows date that time P:spinner component also appears
inside the calendar.
i am using primefaces 5.1 version.
This is the Calendar and p:spinner source code,
<h:panelGrid columns="3">
<p:calendar id="locoutPeriodStartDateCalendarId"
yearRange="c-70:" showButtonPanel="true"
mindate="#{User.accountValidityStartDate}"
value="#{User.lockoutPeriodStartDate}"
pattern="dd/MM/yyyy HH:mm" navigator="true"
showOn="button" mode="popup">
<p:ajax update="panelId"/>
</p:calendar>
<h:outputLabel value="TO:" />
<p:calendar id="lockoutPeriodEndDateCalendarId"
value="#{User.lockoutPeriodEndDate}"
mindate="#{User.accountValidityStartDate}"
pattern="dd/MM/yyyy HH:mm"
yearRange="c-70:"
showButtonPanel="true"
showOn="button"
navigator="true"
mode="popup">
<p:ajax update="panelId"/>
</p:calendar>
</h:panelGrid>
spinner,
<h:outputLabel value="workHoursLabel:"/>
<h:panelGrid columns="4">
<h:panelGrid columns="3">
<p:spinner id="workingHourStartField"
value="#{User.workingHourStartHour}"
max="23"
min="0"
size="2"
disabled="#{User.fieldsDisabled}" />
<p:spinner id="workingHourStartMinute"
value="#{User.workingHourStartMinute}"
max="59"
min="0"
size="2"
disabled="#{User.fieldsDisabled}"/>
<p:spinner id="workingHourStartSecond"
value="#{User.workingHourStartSecond}"
max="59"
min="0"
size="2"
disabled="#{User.fieldsDisabled}"/>
<h:outputText value="(HH)" />
<h:outputText value="(MM)" >
<h:outputText value="(SS)" />
</h:panelGrid>
<h:outputLabel value="To:"/>
<h:panelGrid columns="3">
<p:spinner id="workingHourEndHour"
value="#{User.workingHourEndHour}"
max="23" min="0" size="2"
disabled="#{User.fieldsDisabled}"/>
<p:spinner id="workingHourEndMinute"
value="#{User.workingHourEndMinute}"
max="59"
min="0"
size="2"
disabled="#{User.fieldsDisabled}"/>
<p:spinner id="workingHourEndSecond"
value="#{User.workingHourEndSecond}"
max="59"
min='0'
size="2"
disabled="#{User.fieldsDisabled}"/>
<h:outputText value="(HH)"/>
<h:outputText value="(MM)"/>
<h:outputText value="(SS)"/>
</h:panelGrid>
<p:commandLink id="clearButtonId"
styleClass="ui-icon ui-icon-closethick"
action="#{User.clearWorkHourAction}"
disabled="#{User.fieldsDisabled}"
update="panelId"
title="Click to clear">
</p:commandLink>
</h:panelGrid>
The following image will show the issue.
after click calendar it will look like this,
Please help me how to fix this problem.Thanks in advance.

jsf align checkboxes in panelgrid

Hello I have a form that is rendered with a panelgrid with 3 columns like this:
Label-InputField-ErrorMessage
I want to add some checkboxes but I have trouble with the alignment.
<h:panelGrid columns="3">
<h:outputText value="Όνομα:"></h:outputText>
<h:inputText id="name" value="#{regBean.name}" required="true"
requiredMessage="Παρακαλώ εισάγετε όνομα!"
>
<f:validator validatorId="nameValidator" />
</h:inputText>
<h:message id="namemsg" for="name" style="color:red"></h:message>
<h:outputText value="Επώνυμο:"></h:outputText>
<h:inputText id="surname" value="#{regBean.surname}" required="true"
requiredMessage="Παρακαλώ εισάγετε επώνυμο"
>
<f:validator validatorId="nameValidator" />
</h:inputText>
<h:message for="surname" style="color:red"></h:message>
<h:outputText value="Ενδιφέρομαι για"></h:outputText>
<h:selectManyCheckbox>
<f:selectItem itemValue="1" itemLabel="Number1 - 1" />
<f:selectItem itemValue="2" itemLabel="Number1 - 2" />
<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
<f:selectItem itemValue="4" itemLabel="Number1 - 4" />
</h:selectManyCheckbox>
<h:commandButton type="submit" value="Submit"></h:commandButton>
<h:commandButton type="reset" value="Reset"></h:commandButton>
</h:panelGrid>
Without selectboxes:
This is what I get when I add them:
I want something like this:
I tried adding html tags inside the h:panelGrid but it failed. Is there any way to achieve it only with css/html/jsf?
Thx in advnace

It was easier than I thought. I had to add layout="pageDirection" at the <h:selectManyCheckbox> and wrap the selections in a panelGroup
The fixed code:
<h:outputText value="Ενδιαφέρομαι για"></h:outputText>
<h:panelGroup layout="block">
<h:selectManyCheckbox layout="pageDirection">
<f:selectItem itemValue="1" itemLabel="Item 1" />
<f:selectItem itemValue="2" itemLabel="Item 2" />
<f:selectItem itemValue="3" itemLabel="Item 3" />
<f:selectItem itemValue="4" itemLabel="Item 4" />
</h:selectManyCheckbox>
</h:panelGroup>

Can no longer enter information to a db when using primefaces

i have been using the code below to enter some details into a mysql table, this was working perfectly fine, except i wanted to add more validation and make it look more professional so i decided to use a primefaces library for this, while it does submit the data, it no longer passes it to the db, why is this aas the only thing i have changed is the way the user enters data for looks
heres the working original
<h:form>
<h:messages showDetail="true" />
<h:outputText value="Enter Id : "/>
<h:inputText value="#{user.userID}"/>
<br></br>
<h:outputText value="Enter Name : " />
<h:inputText value="#{user.name}" />
<br></br>
<h:outputText value="Enter your address : "/>
<h:inputText value="#{user.address}" />
<br></br>
<h:outputText value="Enter Created Date : "/>
<h:inputText value="#{user.created_date}">
<f:convertDateTime pattern="yyyy-MM-dd"/>
</h:inputText>
<br></br>
<h:outputText value="Enter email address : "/>
<h:inputText id="email" value="#{user.email}"
size="20" required="true" label="Email Address">
<f:validator validatorId="richard.test.EmailValidator" />
</h:inputText>
<br></br>
<h:message for="email" style="color:red" />
<h:commandButton value="Insert" action="#{user.add}"/>
</h:form>
This is the improved looking one but no longer works
<h:body>
<h:form id="form">
<p:panel id="panel" header="New Person" style="margin-bottom:10px;">
<p:messages id="messages" />
<h:panelGrid columns="3">
<h:outputLabel for="name" value="name: *" />
<p:inputText id="name"
value="#{user.name}" required="true" label="name"/>
<p:message for="name" />
<h:outputLabel for="address" value="address: *" />
<p:inputText id="address"
value="#{user.address}" required="true" label="address"/>
<p:message for="address" />
<h:outputLabel for="Id" value="Id *" />
<p:inputText id="Id"
value="#{user.userID}" required="true" label="Id"/>
<p:message for="Id" />
<h:outputLabel for="Date" value="Date *" />
<p:inputText id="Date"
value="#{user.created_date}" required="true" label="Date"/>
<p:message for="Id" />
</h:panelGrid>
</p:panel>
<p:commandButton value="Ajax Submit" update="panel,display" id="ajax"
actionListener="#{user.add}" styleClass="ui-priority-primary"/>
<!--<p:commandButton value="Non-Ajax Submit" actionListener="{user.add}"
ajax="false" />
-->
<p:panel id="display" header="Information" style="margin-top:10px;">
<h:panelGrid columns="2">
<h:outputText value="name " />
<h:outputText value="#{user.name}" />
</h:panelGrid>
</p:panel>
</h:form>
What would cause this from happening? The backing bean etc have not been changed at all.

Primefaces Datagrid: Dialog not getting updated with selected values

I have an issue with primefaces datagrid.I am trying to update the dialog box with the selected values on click of p:commandLink.
The Dialog doesnt display any values initially but it gets updated with the previously selected values when i refresh the page and click on commandLink.
I am using primefaces-2.2.1 on JBoss 4.3.0.Any help would be appreciated.
<p:column>
<p:panel header="#{loc.loc_details}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="/user/xyz/resources/images/#{loc.loc_details}.jpg"/>
<h:outputText value="#{loc.locality}" />
<h:outputText value="#{loc.city}" />
<h:outputText value="#{loc.state}" />
<p:commandLink update="locDetail,locDetailGrid" oncomplete="locDialog.show()" title="View Detail" border="0" >
<p:graphicImage value="/user/xyz/resources/images/imagesCA6ETPOM.jpg" />
<f:setPropertyActionListener value="#{loc}"
target="#{tutorialsBean.selectedLocality}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:column>
<p:dialog header="Loc Detail" widgetVar="locDialog" modal="true">
<p:outputPanel id="locDetail" style="text-align:center;" layout="block">
<h:panelGrid id="locDetailGrid" columns="2" cellpadding="5">
<h:outputLabel for="loc_details" value="Locality Details :" />
<h:outputText id="loc_details" value="#{tutorialsBean.selectedLocality.loc_details}" />
<h:outputLabel for="city" value="City: " />
<h:outputText id="city" value="#{tutorialsBean.selectedLocality.city}" />
<h:outputLabel for="state" value="State: " />
<h:outputText id="state" value="#{tutorialsBean.selectedLocality.state}" />
<h:outputText styleClass="text_normal" value="First Name" />
<p:inputText id="fnameText" value="#{tutorialsBean.firstName}" />
<h:outputText styleClass="text_normal" value="Last Name" />
<p:inputText id="lnameText" value="#{tutorialsBean.lastName}" />
<h:outputText styleClass="text_normal" value="Email" />
<p:inputText id="emailText" value="#{tutorialsBean.email}" />
<p:commandButton id="searchButton"
value="Submit" action="#{tutorialsBean.submitValues}"
styleClass="button" />
</h:panelGrid>
</p:outputPanel>

in you commandLink add the update and process attributes in your dialog to refresh the information.
like this:
Put the ID in dialog:
<p:dialog header="Loc Detail" id="locDialog" widgetVar="locDialog" modal="true">
Put the Update to dialog:
<p:commandLink update="locDetail,locDetailGrid" oncomplete="locDialog.show()" title="View Detail" border="0" update="locDialog" process="#this" ajax="true" partialSubmit="true" >
<p:graphicImage value="/user/xyz/resources/images/imagesCA6ETPOM.jpg" />
<f:setPropertyActionListener value="#{loc}" target="#{tutorialsBean.selectedLocality}" />
</p:commandLink>