Hello I am here to ask your help following a difficult i meet in my project .Your different point of vue are welcome.
I am using primefaces Schedule to perform a given task but I don't know how
I can pass a parameter to my backing bean.I would like to use this parameter in backing bean when a schedule event triggered like SelectEvent or dateSelect . For example if I have a parameter personeID I would pass this
parameter to the bean so that when actionListener will activate this
setting can be initialized in the bean so that I can use.
that my code
<p:schedule id="schedule" value="#{inscrireAgendaBean.eventModel}" widgetVar="myschedule" process="#form" axisFormat="HH:mm" columnFormat="dddd D/MM" firstHour="08" locale="fr" timeZone="GMT+1" timeFormat="HH:mm">
<p:ajax event="dateSelect" listener="#{inscrireAgendaBean.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
<p:ajax event="eventSelect" listener="#{inscrireAgendaBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
</p:schedule>
I just want to know if there is a possibility to add a parameter to my bean when eventSelect or dateSelect triggered
Thank you !!!
I understand from your question that you want to triger a listener when you select an event, so you have to add a p:ajax with a eventSelect event :
<p:schedule id="scheduleLocale" value="#{managedBean.schedule}" draggable="false" resizable="false" axisFormat="HH:mm" columnFormat="dddd D/MM" firstHour="08" locale="fr" timeZone="GMT+1" timeFormat="HH:mm" >
<p:ajax event="eventSelect" listener="#{managedBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
</p:schedule>
and on you managedBean the onEventSelect method will be as follows:
public void onEventSelect(SelectEvent selectEvent) {
event = (ScheduleEvent) selectEvent.getObject();
}
so getObject() will allow you to retrieve informations like personeID, and depends if you actually put personelID when you first created the event with event = new DefaultScheduleEvent()
to add an event by selecting a date on a schedule, you use p:ajax with dateSelect event:
<p:ajax event="dateSelect" listener="#{managedBean.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
this will show up a dialog, you can put any information you want to add to the event, the user will enter it, so no need to pass any parameters.
Related
Is it possible to do a conditional update with Ajax. I have two calendar components and the code is as follows
Calendar component 1 (workDate)
<h:outputLabel value="#{lbl.WorkDate}" for="workDate" rendered="#{!userManager.customerUser}"/>
<p:calendar id="workDate" value="#{jobs_Builder.selected.workDate}" pattern="dd/MM/yyyy" mask="true" rendered="#{!userManager.customerUser}" mindate="Date()">
<p:ajax event="dateSelect" update="requestedDeliveryDate" />
</p:calendar>
Calendar component 2(requestedDeliveryDate)
<h:outputLabel value="#{lbl.RequestedDeliveryDate}" for="requestedDeliveryDate" rendered="#{!userManager.customerUser}"/>
<p:calendar id="requestedDeliveryDate" value="#{jobs_Builder.selected.requestedDeliveryDate}" pattern="dd/MM/yyyy" mask="true" rendered="#{!userManager.customerUser}" mindate="#{jobs_Builder.selected.workDate}"/>
The behavior is whenever the date is set in wordkdate, the requestedDeliveryDate is reset, but what I want is to get that reset only if the requestedDeliveryDate is earlier than the workDate.
Is this something which I can do?
Change your dateSelect event not to update anything but use a Java listener instead like..
<p:ajax event="dateSelect" listener="#{controller.onDateSelect}" />
In your Java method check for your two dates and if your condition is met update the UI component from this method.
public void onDateSelect() {
if (date1 > date2) {
// update other calendar
PrimeFaces.current().ajax().update("requestedDeliveryDate");
}
}
I'm try to use the primefaces calendar with popup in this way:
<p:calendar pattern="yyyy-MMM-dd" value="#{controller.beginDate}" mask="true" navigator="true">
<f:ajax event="valueChange" listener="#{controller.onChange}" />
</p:calendar>
And here is the relative controller:
#ManagedBean
public class Controller {
private Date beginDate;
public Date getBeginDate() {
return beginDate;
}
public void setBeginDate(Date beginDate) {
this.beginDate = beginDate;
}
public void onChange() {
// do somethings
}
}
The problem: if I change the value from the input field, the event will be execute, but if I change it from the popup, the event will NOT execute.
Can anyone help me?
The valueChange event is only triggered by HTML DOM change event. This is indeed not triggered when the input value is manipulated by JavaScript means.
You need the dateSelect event instead. And, in PrimeFaces components, you'd better use <p:ajax> instead of <f:ajax>.
<p:calendar ...>
<p:ajax event="valueChange" listener="#{controller.onChange()}" />
<p:ajax event="dateSelect" listener="#{controller.onChange()}" />
</p:calendar>
See also:
PrimeFaces Users Guide
Try using the PrimeFaces dateSelect event.
From PrimeFaces documentation:
Calendar provides a dateSelect ajax behavior event to execute an instant ajax selection whenever a date is selected. If you define a method as a listener, it will be invoked by passing an org.primefaces.event.SelectEvent instance.
<p:calendar value="#{calendarBean.date}">
<p:ajax event="dateSelect" listener="#{bean.handleDateSelect}" />
</p:calendar>
I am using the selectCheckboxMenu to enable multiple users be selected. What I am trying to achieve is that, every time the user does a selection, the event will call the listener and pass in the selection as a parameter. Something like this
<p:selectCheckboxMenu id="user" value="#{userBean.selectedUserList}"
multiple="true" filter="true" filterMatchMode="contains">
<f:selectItems value="#{userBean.users}" var="selectedUser"
itemValue="#{selectedUser}"/>
<p:ajax event="change"
listener="#{userBean.addThisUserIntoAnotherList(selectedUser)}"/>
</p:selectCheckboxMenu>
I have tried to add the var="selectedUser" in the selectCheckBoxMenu tag instead but both return null as the parameter.
I have yet another misunderstanding of Primefaces work logic.
For now <p:calendar> component cannot set selected date when I press submit button.
I see that it successfully enters into actionListener method, but date value is null there.
First of all I tried create my calendar using standard PF example. It looked too simple and I thought according this that the component should call value setter when the user select the date or submit the form. But it did it neither in the first nor in the second case.
Well, I opened Google and found a few posts:
Primefaces Calendar Setting Date Value in Backing Bean
p:calendar value not set in backing bean
I ensured that my calendar is located between <h:form></h:form> tags. Also I tried to add process="#this" and process=":beginDateForm :endDateForm #this", where beginDateForm and endDateForm are forms contained <p:calendar> components.
Also I found the post and tried to create SelectEvent listener method:
private void changeDate(SelectEvent event) {
beginDate = (Date) event.getObject();
}
But unsuccessfully.
I also tried to change Date using valueChangeListener:
<h:form id="beginDateForm">
<p:calendar id="passBeginDate" valueChangeListener="#{territoryFormBean.changeDate}" mode="popup" readonly="true" pattern="dd.MM.yyyy" showOn="button" value="#{territoryFormBean.beginDate}" />
</h:form>
Of course I changed event to ValueChangeEvent.
After that I moved <p:calendar> and <p:commandButton> components into the same <h:form> and tried two different process values process="passTerrForm:passBeginDate passTerrForm:passEndDate #this" and process="#form #this" and process="#form"
In the last case button does not trigger even the listener method.
My current components are:
<p:commandButton value="Search" id="searchPassButton" actionListener="#{territoryFormBean.search}" update=":passTerrForm:territoryTable" process="passTerrForm:passBeginDate passTerrForm:passEndDate #this" partialSubmit="true" />
<p:column>
<p:calendar id="passBeginDate" mode="popup" readonly="true" pattern="dd.MM.yyyy" showOn="button" value="#{territoryFormBean.beginDate}" />
</p:column>
<p:column>
<p:calendar id="passEndDate" mode="popup" readonly="true" pattern="dd.MM.yyyy" showOn="button" value="#{territoryFormBean.endDate}" />
</p:column>
Guys, could you please suggest anything else. Or probably you can see what is wrong in my code.
I cannot understand why the component does not call setter.
Well, guys, I found my mistake. Stupid mistake. Yet another re-read the PF documentation showed that using readonly parameter is incorrect for my goals. I wanted to prevent the manual date input directly into <p:calendar> text field. But according the documentation:
readonly -
Flag indicating that this input element will prevent changes by the
user
But I need readonlyInput parameter which
Makes input text of a popup calendar readonly.
So the second parameter prevents input, while the first one prevents changes totally.
Thank you for your help.
Trying to make an analogy with a code that I have, I think that putting the button into the same form as the calendar, and omitting the 'process' and 'partialSubmit' should work:
<h:form id="beginDateForm">
<p:calendar id="passBeginDate" valueChangeListener="#{territoryFormBean.changeDate}" mode="popup" readonly="true" pattern="dd.MM.yyyy" showOn="button" value="#{territoryFormBean.beginDate}" />
<p:commandButton value="Search" id="searchPassButton" actionListener="#{territoryFormBean.search}" update=":passTerrForm:territoryTable" />
</h:form>
I hope it helps!
JSF Code:
<p:calendar id="from" value="#{pageBean.event.startDate}" pattern="MM/dd/yyyy hh:mm:ss a" timeZone="GMT-4"/>
<p:commandButton id="addButton" value="Save" actionListener="#{pageBean.addEvent}" update=":#form"/>
You can write an addEvent method in the Bean where you need to add these calendar event to an eventModel and save it. This helps you to set the date and you can retrieve it as and when you need.
Java Code:
private ScheduleModel eventModel;
private ScheduleEvent event = new DefaultScheduleEvent();
public String addEvent(ActionEvent actionEvent) {
if(event.getId() == null){
eventModel.addEvent(event);
}
}
Hope this helps!!
Since there's no attribute/option for <p:calendar> (readonlyInput="true") to reset the value to null, the best available solution currently is to use some client JS to reset the value like here:
https://stackoverflow.com/a/12325640/396732
However, as soon as the clear button controls an AJAX button, the new calendar value isn't submitted.
I tried to process the end-date button, like:
<p:calendar id="end-date"
widgetVar="myEntityEndDate"
value="#{myEntityManager.selectedEndDate}"
readonlyInput="true"
showOn="button">
<!-- update dependent "begin" calendar component: -->
<p:ajax event="dateSelect" process="#this" update="begin-date" />
</p:calendar>
<p:commandButton icon="ui-icon ui-icon-close"
onclick="myEntityEndDate.setDate(null);"
process="end-date"
update="begin-date end-date" />
However it isn't working...
Q:
How do you implement a reset button for an AJAXed p:calendar component?
Addendum:
The same question was asked here: http://forum.primefaces.org/viewtopic.php?f=3&t=27821 . It seems like jQuery could be the "guilty party". Anyways, it should be solved/solvable IMHO.
If you want the reset will be reflected on the server you should use the action of p:commandButton
<p:commandButton icon="ui-icon ui-icon-close"
action="#{myEntityManager.resetDate}"
process="end-date"
update="begin-date end-date" />
public void resetDate(){
selectedEndDate = null;
}