[SOLVED] control when Timepicker ajax events fire

[HariMandala]

Hi,
I have the exact issue as discussed in the thread below. I am creating a new post to conform with the rules of forum.

viewtopic.php?f=3&t=20540&p=88281&hilit ... jax#p88281

Issue: We have calendar component with timepicker capabilities. There is a need for "DateSelect" event to be used as well (to control date range). For the user to change "date" and "time", user has to bring up "calendar" component twice. (why? see below)
1) an ajax event is fired after the date selection is made. Some backing bean code runs and calendar hides after backing bean code execution
2) User has to bring up calendar component again to change time.

If the user wished to change both hours and minutes in the Calendar, I think that will be 2 more ajax events and the calendar component has to be brought up 3 times in this case (4 times when user wishes to change seconds).

Is there a way I can avoid this behavior?

the "filterDelay" option in datatable to fire only after certain milliseconds is great. I have just found about it while browsing through the forum and used it in my code. It works great. Is there something similar or can someone help me point in that direction for Calendar component as well.

Does this behavior need to be reported in issue Tracker?

EDIT: I solved it by changing "update=@form" instead of a specific update to a component that I am interested in.

[HariMandala]

If someone is looking for some working code related to this behavior, please see below. I need any Primefaces team member or an expert Primefaces developer to acknowledge that this is the expected behavior in the latest Primefaces build. Also, if there are any future (I would say) "enhancements" to fix this behavior (Like adding a eventDelay attribute)

XHTML code

Code: Select all

<h:panelGrid id="datesPanelGrid" columns="2">
						<b>Start Date:</b>
						<p:calendar id="selectBeginDate" value="#{Yourbean.beginDate}"
							readOnlyInputText="true" navigator="true"
							pattern="MM/dd/yyyy HH:mm:ss"
							mindate="#{Yourbean.minBeginDate}"
							maxdate="#{Yourbean.maxBeginDate}"
							>
							<p:ajax event="dateSelect" listener="#{Yourbean.handleBeginDateSelect}" update="homeForm:selectEndDate" />
						</p:calendar>

						<b>End Date:</b>
						<p:calendar id="selectEndDate" value="#{Yourbean.endDate}"
							readOnlyInputText="true" navigator="true"
							pattern="MM/dd/yyyy HH:mm:ss"
							mindate="#{gpsMessagesView.minEndDate}"
							maxdate="#{Yourbean.maxEndDate}"
							>
							<p:ajax event="dateSelect" listener="#{Yourbean.handleEndDateSelect}" update="homeForm:selectBeginDate" />
						</p:calendar>
					</h:panelGrid>

Backing bean (relevant) code:

Code: Select all

public void handleBeginDateSelect(DateSelectEvent event){											
			setMinEndDate(getBeginDate());
			
			Calendar cl = Calendar.getInstance();
			cl.setTime(getBeginDate());
			cl.add(Calendar.DATE, 14);
			
			Calendar today = Calendar.getInstance();
			if(today.before(cl))
				setMaxEndDate(today.getTime());
			else
				setMaxEndDate(cl.getTime());		
			
	}
	
	public void handleEndDateSelect(DateSelectEvent event){											
		setMaxBeginDate(getEndDate());
		
		Calendar cl = Calendar.getInstance();
		cl.setTime(getEndDate());
		cl.add(Calendar.DATE, -14);
		
		setMinBeginDate(cl.getTime());			
		
	}

Let me know, if I can provide you with anything else.

[HariMandala]

XHTML code

Code: Select all

<h:panelGrid id="datesPanelGrid" columns="2">
						<b>Start Date:</b>
						<p:calendar id="selectBeginDate" value="#{Yourbean.beginDate}"
							readOnlyInputText="true" navigator="true"
							pattern="MM/dd/yyyy HH:mm:ss"
							mindate="#{Yourbean.minBeginDate}"
							maxdate="#{Yourbean.maxBeginDate}"
							>
							<p:ajax event="dateSelect" listener="#{Yourbean.handleBeginDateSelect}" update="homeForm:selectEndDate" />
						</p:calendar>

						<b>End Date:</b>
						<p:calendar id="selectEndDate" value="#{Yourbean.endDate}"
							readOnlyInputText="true" navigator="true"
							pattern="MM/dd/yyyy HH:mm:ss"
							mindate="#{gpsMessagesView.minEndDate}"
							maxdate="#{Yourbean.maxEndDate}"
							>
							<p:ajax event="dateSelect" listener="#{Yourbean.handleEndDateSelect}" update="homeForm:selectBeginDate" />
						</p:calendar>
					</h:panelGrid>

I had to change the following in the above xhtml code. Update whole of the form than just the component that I need.

Code: Select all

<p:ajax event="dateSelect" listener="#{Yourbean.handleEndDateSelect}" update="@form" />

I shall mark this thread as solved for now. But, if someone finds a better answer do post it as a separate post (or in here, if possible).