How to submit manual entered date in primefaces calendar? - ajax

I've got a form with two primefaces calendar input elements and a datatable on it. The calendar items are used to filter the result displayed in the table as from to values. Therefore I use an p:ajax ‘dateSelect’ event which is working fine when doing the manipulation with the mouse over the popup. But when I change the date manually in the input field with the keybord no change event is fired. When I use a second p:ajax event for blur or change I'm not able to get the new value.
<p:calendar id="startDate"
value="#{filterStart}"
required="true"
showOn="button"
maxdate="#{filterEnd}"
>
<p:ajax event="dateSelect"
listener="#{listController.onFilterStartChanged}"
update="filterTbl, endDate" />
<p:ajax event="change"
listener="#{listController.onFilterStartBlured}"
update="filterTbl, endDate"
process="#this"
partialSubmit="true" immediate="true" />
</p:calendar>
the method onFilterStartChanged gets called when selection is made over the pupup it's possible to read the new value:
public void onFilterStartChanged(final SelectEvent event) {...}
but the Keyboard changes are not fired when moving Focus to another component
public void onFilterStartBlured(final AjaxBehaviorEvent event) {
Date newDate = (Date)((Calendar)event.getSource()).getValue();
...
}
how can I get the new date?

I have same need with p:calendar in Primefaces 5.3 and it's work for me whit this code. I don't use event parameter
<p:calendar id="startDate"
value="#{filterStart}"
required="true"
showOn="button"
maxdate="#{filterEnd}">
<p:ajax event="dateSelect"
listener="#{listController.onFilterStartChanged()}"
update="filterTbl, endDate" />
<p:ajax event="change"
listener="#{listController.onFilterStartChanged()}"
update="filterTbl, endDate" />
</p:calendar>
no parameter in the method, value is in filterStart
public void onFilterStartChanged() {...}

Related

How to get other component value from p:ajax listener when I click on p:tree

I have a problem and I need your helps!!! I want to get selected value of p:selectOneListbox when I click on a tree, but the value is always null, even though I clicked on p:selectOneListbox first. Here is my xhtml code:
<h:form>
<p:selectOneListbox id="selectRole"
value="#{grandUseAuthoritiesBean.selectedRoleId}"
filter="true" filterMatchMode="contains">
<f:selectItems value="#{grandUseAuthoritiesBean.roleList}"
var="role" itemLabel="#{role.code}" itemValue="#{role.roleId}" />
</p:selectOneListbox>
<p:tree value="#{grandUseAuthoritiesBean.root}"
selectionMode="single" var="node"
style="font-size:13px; width:100%;border-width:0">
<p:treeNode icon="ui-icon-calculator">
<h:outputText value="#{node}" />
</p:treeNode>
<p:ajax event="select" update="#([id$=privilegeChecbox])"
listener="#{grandUseAuthoritiesBean.onNodeSelect()}">
</p:ajax>
</p:tree>
</h:form>
and here is my manage bean's code:
public String selectedRoleId;
public String getSelectedRoleId() {
return selectedRoleId;
}
public void setSelectedRoleId(String selectedRoleId) {
this.selectedRoleId = selectedRoleId;
}
public void onNodeSelect(NodeSelectEvent event) {
if (selectedRoleId!=null)
System.out.println("selected Role Id: "+ this.selectedRoleId);
}
I can't print the variable "selectedRoleId" coz it is null but if I use a button'method to call this variable, I can get its value. What should I do? Thanks for reading my question!
The thing is when you choose something from listbox it is not visible inside backing bean until you send a form or do a partial sending so hence null value. Add partial processing to <p:selectOneListbox> and check again:
<p:ajax process="#this" partialSubmit="true" />
Also similar topic:
https://stackoverflow.com/a/14988129/3803447

How to conditionally run jsf Validator on blur event with p:ajax?

In my xhtml page I have inputText field with two Validators attached to it. Also there is ajax event "blur" attached for triggering validation when switching focus from a field. Here is the code:
<t:selectOneMenu id="locateRecordBy" value="#{personBean.locateRecordBy}">
<f:selectItems value="#{personBean.locateRecordByItems}"/>
</t:selectOneMenu>
<t:inputText id="personName"
value="#{personBean.name}"
required="true"
requiredMessage="Name is required.">
<p:ajax event="blur" partialSubmit="true" process="#this" update="nameerror" global="false" />
<f:validator disabled="#{param['PersonForm:locateRecordBy'] == 'FEMALE'}" validatorId="com.myapp.validators.MalePersonValidator"/>
<f:validator disabled="#{param['PersonForm:locateRecordBy'] == 'MALE'}" validatorId="com.myapp.validators.FemalePersonValidator"/>
</t:inputText>
So I'd like to validate personName against appropriate Validator depending of selecting item after focus is not anymore on the personName field. Any suggestions please, what should I change or add?
p.s. On form submit validation work very well.
Actually I found what was missing in my code. I added locateRecordBy componnent to be processed with ajax so instead of having this:
<p:ajax event="blur" partialSubmit="true" process="#this" update="nameerror" global="false" />
I have this:
<p:ajax event="blur" partialSubmit="true" process="#this, locateRecordBy" update="nameerror" global="false" />
Basically I forgot instruct JSF to process locateRecordBy and that's why locateRecordBy parameter was never present in the ajax request which caused both validators to be became disabled and validation of personName field to be skipped.

Ajax event is not triggering Validation (Facescontext)

I have two field dates on my Jsf form.
Date 1 : DOB and Date 2: Date_Retire
When the user will select a date from Date_retire, it should be greater than 18 years old.
<h:outputText value="DOB:" />
<p:calendar pattern="mm/dd/yyyy" id="dob" value="#{ActorComponent.actor.dob}"
required="false" converter="primefacesCalendarConverter" />
<h:outputText value="Date retired:" />
<p:calendar pattern="mm/dd/yyyy" id="dateretired"
value="#{ActorComponent.actor.dateretired}"
required="false" converter="primefacesCalendarConverter" >
<p:ajax event="dateSelect" listener="#{ActorComponent.minimumDate()}"
process= "dateretired"" >
</calendar>
Listener:
public void minimumDate(Calendar Object){
Calendar dob=actor.getdob();
dob.add(Calendar.Year,18);
if(Object.before(dob)){
FacesContext.getCurrentInstance().addMessage(
"FacesMessage.SEVERITY_ERROR",
new FacesMessage("Date is not valid."));
}
}
The ajax is not working. Facescontext is not displaying the message. Anyone can help?
I'm not sure if "dateSelect" is a real event, try using "click" or "onclick"
<p:ajax event="click"

<f:ajax> doesn't work on PrimeFaces component

I trying to use the onChange event of selectOneMenu, but it doesn't work and the component is not displayed when I add onChange attribue.
Can someone tell me how can I handle the onChange event of <p:selectOneMenu>?
Here is my view:
<p:selectOneMenu id="service" filterMatchMode="startsWith">
<f:selectItem itemLabel="Selectionner un Service : " />
<f:selectItems value="#{newOpProgramme.listeSevice}" var="service" itemValue="#{service.serviceId}" itemLabel="#{service.serviceNom}"/>
<f:ajax event="change" execute="#this" listener="#{newOpProgramme.serviceChange()}" render="nomCdp"/>
</p:selectOneMenu>
And here is the <f:ajax listener> method in a request scoped bean:
public void serviceChange() {
System.out.println("change");
}
When I change the menu, however, nothing is been printed.
How is this caused and how can I solve it?
First of all, onChange is the wrong event name. It's change. Secondly, if you intend to call the HTML attribute name, onChange is also the wrong attribute name. It's onchange.
Coming back to your concrete problem; the standard JSF <f:ajax> is not compatible with PrimeFaces components. You should be using PrimeFaces own <p:ajax> instead.
<p:selectOneMenu ...>
...
<p:ajax listener="#{newOpProgramme.serviceChange()}" update="nomCdp" />
</p:selectOneMenu>
Note that I omitted the event and the process attributes. They both have already the right default value of valueChange and #this respectively.
See also:
What values can I pass to the event attribute of the f:ajax tag?
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
When I want to update something after change in selectOneMenu, I use <f:ajax> tag inside selectOneMenu like this:
<h:selectOneMenu value="#{bean.selected}" >
... select items here
<f:ajax event="change" execute="#this" render="search" />
</h:selectOneMenu>
Where search is the Id of the object you want to update.
Other solution is that you should try onchange not onChange.
<p:selectOneMenu value="#{someBean.myAttr.id}" valueChangeListener="#someBean.mySelectioMethodListener}">
<f:selectItems value="#{someBean.listAttrs}" var="item"
itemLabel="#{item.name}" itemValue="#{item.id}" />
<p:ajax process="#this" update="someElementId" />
</p:selectOneMenu>
You must put an Id for <f:selectItems /> and set your selection on backing bean side by posted ajax itemValue (id).
Server side method bean without a converter:
public void mySelectionMethodListener(ValueChangeEvent event) {
ApplicationContext context = FacesContextUtils.getWebApplicationContext(FacesContext.getCurrentInstance());
SomeBeanDao someBeanDao = (SomeBeanDao) context.getBean(SomeBeanDao.class);
myAttr = someBeanDao.byId((Long) event.getNewValue());
System.out.println("value changed...");
}

Primefaces Calendar <f:ajax> and <p:ajax> issue

I am currently facing issue using with primefaces Calendar control
My requirement is to invoke a java method on change of the Calendar control value either from the input box or using the button and also pass a set of parameters(Java object and the field id) to the java method.
below is the code that I have implemented and it is not working
<p:calendar showOn="button" id="effectiveDt" navigator="true" pattern="MM/dd/yyyy"
styleClass="overrideable" value="#{coverage.startDate}">
<f:ajax event="change" render="hiddenStartDt" onevent="myEvent" listener="#{certInquiry.ovrrrideListener}"/>
<f:attribute name="covg" value="#{coverage}" />
<f:attribute name="field" value="StartDate" />
</p:calendar>
here myEvent is a java script method which will be called after the ajax is completed where i am checking the ajax status is success and performing some action.
method signature of the java method is.
*public void overrideListener(AjaxBehaviorEvent e) *
I tried with all kinds of methos signatures like
public overrideListener(ValueChangeEvent e)
public overrideListener(ActionEvent e)
public ovrrrideListener(DateSelectEvent event)
nothing was working for me
I have tried using also even this was not working
I also tried using valueChangeListener if the method gets called but it was not invoking the method
this is working for and fields using the
<h:selectBooleanCheckbox class="overrideable"
value="#{coverage.clIndicator}">
<f:ajax event="change" render="hidgenLiabClaimsMdInd" onevent="myEvent" listener="#{certInquiry.overrideListener}"/>
<f:attribute name="covg" value="#{coverage}" />
<f:attribute name="field" value="ClIndicator" />
</h:selectBooleanCheckbox>
<h:inputText id="genLiabEachOccAmt" value="#{coverage.eachOccAmt}"
class="amt_field overrideable">
<f:ajax event="change" render="hidgenLiabEachOccAmt" onevent="myEvent" listener="#{certInquiry.overrideListener}"/>
<f:attribute name="covg" value="#{coverage}" />
<f:attribute name="field" value="EachOccAmt" />
</h:inputText>
Please help me in solving this issue for the Calendar component.
Make the ajax event="dateSelect" and you should get the date value in your BB when you use ovrrrideListener(DateSelectEvent event).

Resources