I am using p:calendar Primefaces component for specifying 2 dates : start and end.
An evident control is to verify if end date is not before start date.
Is there a way to do it ?
I found the solution :
<p:outputLabel for="startDate" value="#{msg.StartDate}" />
<p:calendar id="startDate" value="#{employeeBean.employee.startDate}" required="true" pattern="dd-MM-yyyy" language="#{msg.CalendarLanguage}" mask="true"
requiredMessage="#{msg.required}">
<p:ajax event="dateSelect" update="endDate" />
</p:calendar>
<p:message for="startDate" />
<p:outputLabel for="endDate" value="#{msg.EndDate}" />
<p:calendar id="endDate" mindate="#{employeeBean.employee.startDate}" value="#{employeeBean.employee.endDate}" required="false" pattern="dd-MM-yyyy"
language="#{msg.CalendarLanguage}" mask="true">
</p:calendar>
<p:message for="endDate" />
Related
I want to do conditional Polling in Primefaces (Version:6.0.0).
Here is the polling code:
<p:poll interval="20" update="liveChart,chrtTC_Cnt_Status,chrtStatus" />
For Example, I am field call Status. If status value is 'In-Progress' then only polling should start. Or else it should not do polling.
Here is my field code, if this value changed to 'In-Progress' then polling should start or else not
<p:outputLabel value="Status:" />
<p:outputLabel id="lblCurrentStatus" value="#{backingBean.status}" />
Here is my Xhtml code
<h:panelGrid columns="2" width="400">
<p:outputLabel for="lblStudentName" value="Select Other StudentName: " />
<p:selectOneMenu id="lblStudentName" style="width:250px"
value="#{backingBean.selectedStudent}"
panelStyle="width:180px" effect="fade" filter="true"
filterMatchMode="startsWith">
<f:selectItem itemLabel="Select One" itemValue=""
noSelectionOption="true" />
<f:selectItems value="#{backingBean.studentItemList}" />
<p:ajax
listener="#{backingBean.OnChangeOtherStudentDropDown}"
update=":idForm:tabStatus:p1,:idForm:tabStatus:p4,growl"
process="#form" />
</p:selectOneMenu>
<p:tabView id="tabStatus">
<p:tab title="Status" id="idStatusTab">
<h:panelGrid columns="3" cellpadding="10" id="p1">
<p:growl id="growl" showDetail="true" />
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" draggable="false"
closable="false" resizable="false" showHeader="false">
<h:graphicImage value="/images/ajax-loader.gif" />
</p:dialog>
<h:panelGrid columns="2" cellpadding="5" id="p2">
<p:outputLabel value="Failed:" />
<p:outputLabel id="lblCurrentFailed"
value="#{backingBean.intCurrentFailedStudent}" />
<p:outputLabel value="Processed:" />
<p:outputLabel id="lblCurrentProcess"
value="#{backingBean.intCurrentPassedStudent}" />
<p:outputLabel value="Status:" />
<p:outputLabel id="lblCurrentStatus"
value="#{backingBean.status}" />
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="10" id="p3">
<p:chart type="pie" model="#{backingBean.pieModel1}"
rendered="#{not empty backingBean.pieModel1}"
id="chrtStatus" style="width:300px;height:200px">
</p:chart>
<br />
</h:panelGrid>
</h:panelGrid>
<h:panelGrid columns="3" cellpadding="10" id="p4">
<p:poll interval="20" update="liveChart,chrtTC_Cnt_Status,chrtStatus" />
<p:chart type="line"
model="#{backingBean.lineCurrentLineChart}"
rendered="#{not empty backingBean.lineCurrentLineChart}"
id="liveChart" style="height:500px;width:500px" />
<p:chart type="bar"
model="#{backingBean.barStatusCountStudent}"
rendered="#{not empty backingBean.barStatusCountStudent}"
id="chrtTC_Cnt_Status" style="width:500px;height:500px">
<p:ajax event="itemSelect" listener="#{backingBean.itemSelect}" />
</p:chart>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
Solution 1:
Wrap your p:poll within h:panelGroup or h:panelGrid, set rendered="#{backingBean.status eq 'In-Progress'}" on panel and update panel on changing of status, that will reset your polling.
Solution 2:
If you want to manually start and stop the polling then you need to set autoStart="false" and add widgetVar="statusPoll" attributes on p:poll and by invoking PF('statusPoll').start(); and PF('statusPoll').stop(); on changing the value of status field.
It is working,
<h:panelGrid columns="1" id="ID_polling" rendered="#{BackingBean.status eq 'In-Progress'}">
<p:poll interval="20" update="liveChart,chrtTC_Cnt_Status,chrtStatus" />
</h:panelGrid>
When I write this Panel, Panel will display only when status = 'In-Progress' or else it will not display.
Thank you again,
I have an output label and inputText and I want to implement calendar but when i put it,
it doesn't work
<p:outputLabel value="Date " for="datem" />
<p:inputText id="datem" value="# {bean.datem}"title="date" >
<f:convertDateTime pattern="d-M-yyyy" />
</p:inputText>
I use primefaces 4, template : cupertino.
I want to make the outline of a input "red" if field is empty.
I upgraded to type field required = "true", but the outline remain in their original state if they are empty.
But for fields of type HTML 5 all goes well.
Thank you.
<form id="form_inscri_pp" name="form_inscri_pp">
<h:panelGrid columns="2" cellpadding="5" >
<h:outputText value="Nom:" styleClass="label_inscri_pp"/>
<input id="nom_pp" class='inscription_candidat'
placeholder='Saisissez votre nom' type='text' name="nom_pp"
pattern="^[A-Za-z ]+$" maxlength="25" required="required"
autocomplete="on"/>
<h:outputText value="Date de naissance: " styleClass="label_inscri_pp"/>
<p:calendar name="DN_pp" id="DN_pp" value="#{calendrier.date}"
locale="fr" showOn="button" navigator="true"
pattern="dd/MM/yyyy" mindate="1/1/1950" maxdate="31/12/1993"
mask="true" required="true" readonly="true" size="20" />
</h:panelGrid>
<input class='button_inscri' type='submit' value="S'inscrire" />
<input class='button_inscri' type='button' value='Réinitialiser' />
</form>
According the code you post, the input text with id nom_pp get red-outlined when I input nothing. The only thing that won't work is p:calendar, which is because you put a readonly attribute in it.
So the solution is simply remove the readonly attribute of the p:calendar.
And BTW, there is no name attribute in p:calendar, so remove it, too.
What's more, you need to use <h:form> instead of <form>. And there is also no name parameter in <h:form>.
So you code should looks like:
<h:form id="form_inscri_pp" >
<h:panelGrid columns="2" cellpadding="5" >
<h:outputText value="Nom:" styleClass="label_inscri_pp"/>
<input id="nom_pp" class='inscription_candidat'
placeholder='Saisissez votre nom' type='text' name="nom_pp"
pattern="^[A-Za-z ]+$" maxlength="25" required="required"
autocomplete="on"/>
<h:outputText value="Date de naissance: " styleClass="label_inscri_pp"/>
<p:calendar id="DN_pp" value="#{inputValidateBean.date}"
locale="fr" showOn="button" navigator="true"
pattern="dd/MM/yyyy" mindate="1/1/1950" maxdate="31/12/1993"
mask="true" required="true" size="20" />
</h:panelGrid>
<input class='button_inscri' type='submit' value="S'inscrire" />
<input class='button_inscri' type='button' value='Réinitialiser' />
</h:form>
UPDATE
Since the solution above doesn't work in your environment, try to replace all HTML5 components to primeface/jsf components.
I tried that and it also works in my environment.
Take a look at this:
<h:form id="form_inscri_pp" >
<h:panelGrid columns="2" cellpadding="5" >
<h:outputText value="Nom:" styleClass="label_inscri_pp"/>
<p:inputText id="nom_pp" styleClass="inscription_candidat"
placeholder="Saisissez votre nom" maxlength="25"
required="true" autocomplete="on" value="#{inputValidateBean.nom}">
<f:validateRegex pattern="^[a-zA-Z]+$" />
</p:inputText>
<h:outputText value="Date de naissance: " styleClass="label_inscri_pp"/>
<p:calendar id="DN_pp" value="#{inputValidateBean.date}"
locale="fr" showOn="button" navigator="true"
pattern="dd/MM/yyyy" mindate="1/1/1950" maxdate="31/12/1993"
mask="true" required="true" size="20" />
</h:panelGrid>
<p:commandButton styleClass="button_inscri" value="S'inscrire"
validateClient="true" update="form_inscri_pp"
action="#{inputValidateBean.doSubmit()}"/>
</h:form>
In the backing bean:
#ManagedBean
#ViewScoped
public class InputValidateBean implements Serializable{
private Date date;
private String nom;
public void doSubmit(){
System.out.println("Do something!");
}
//getters and setters below...
I have simple flow of 3 tabs. I have tested the Simple tabview example on showcase.
But When I change the first tab with my content, I can't switch to other tabs.
Kindly guide me with what is wrong that needs to be changed.
Earlier I was using Wizard but I had the same tab change problem there as clicking on next was taking me to the last tab everytime.
and Now facing other issue with Tabview
I am posting the code:
<h:form id="compositionmaster">
<p:tabView id="tabView">
<p:tab id="tab1" title="Committee Details">
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Committee Type: " />
<p:selectOneMenu id="type" value="#{userWizard.comm.committeeType}" effect="fade">
<f:selectItem itemLabel="----Select----" itemValue="0" />
<f:selectItem itemLabel="New" itemValue="1" />
<f:selectItem itemLabel="Existing" itemValue="2" />
</p:selectOneMenu>
<h:outputText value="Concerned Division: " />
<p:selectOneMenu id="division" value="#{userWizard.comm.committeeSubType}" effect="fade">
<f:selectItem itemLabel="----Select----" itemValue="0" />
<f:selectItem itemLabel="Administration" itemValue="1"/>
<f:selectItem itemLabel="Finance" itemValue="2" />
<f:selectItem itemLabel="Marketing" itemValue="3" />
<f:selectItem itemLabel="Others" itemValue="4" />
</p:selectOneMenu>
<h:outputText value="Committee Name: " />
<p:inputText value="#{userWizard.comm.committeeName}" maxlength="100"/>
<h:outputText value="Subject: " />
<p:inputText value="#{userWizard.comm.committeeSubject}" maxlength="100" />
<h:outputText value="Description: " />
<p:inputText value="#{userWizard.comm.committeeDescription}" maxlength="500" />
<h:outputText value="Tenure of Committee: " />
<p:panelGrid columns="2" >
<p:inplace id="Tenure" label="From">
<p:calendar value="#{userWizard.comm.startDate}" id="start" showOn="button" />
</p:inplace>
<p:inplace label="To">
<p:calendar value="#{userWizard.comm.endDate}" id="end" showOn="button" />
</p:inplace>
</p:panelGrid>
<h:outputText value="Add Document: " />
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" mode="advanced" update="messages" multiple="true" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png|doc|pdf)$/"/>
</h:form>
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="Godfather Part II">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText id="tab2Text" value="stature grows."/>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="Godfather Part III">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText id="tab3Text" value="After a promise that his family would one day be completely legitimate."/>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
Don't use nested forms
HTML doesn't allow nested forms, so you shouldn't use them in primefaces either.They can cause undesired behavior.
See: other stackoverflow questions, or a nice collection of things to avoid in JSF: here (note point 2)
This is the only problem I see in your code. Other than that in rare cases you might have problems if using ajax and not processing the whole form. But as I can see this is not the case in your code.
I want to show the first tab, and by default (I mean, without activeIndex) it shows me that tab, but it doesn't show the content.
<p:accordionPanel id="acordeon" value="#{editarReporteExcelBean.reporteOperacionDtoList}" var="reporteOperacion" activeIndex="0" >
<p:tab id="areaTab" >
<f:facet name="title">Area #{reporteOperacion.area.nombre}</f:facet>
<anglosgi:reporteOperacion id="reporteOperacion1"
reporteOperacionDto="#{reporteOperacion}"
formId="reporteForm"
contenedorId="reporteForm:acordeon"/>
</p:tab>
</p:accordionPanel>
and there's the first lines of {#reporteOperacion}:
<composite:interface>
<composite:attribute name="reporteOperacionDto" required="true" />
<composite:attribute name="contenedorId" required="true" />
<composite:attribute name="formId" required="true" />
</composite:interface>
<composite:implementation>
<p:outputPanel id="panelGeneral" >
<fieldset>
<legend>Reporte
<h:outputText value="#{cc.attrs.reporteOperacionDto.metaArchivoReporte.fecha}" >
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT-4" />
</h:outputText>
</legend>