p:calendar onselect/onchange not fired
Question
I am trying to have two Javascript functions that are being called as soon as a user selects a date from ap:calendar.
Unfortunately, the onchange event is only being processed if the user types a date manually in the text field and tabs forward. The onselect event is not being fired at all.
The xhtml is as follows:
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputScript library="js" name="custom.js" target="body" />
</h:head>
<h:body>
<p:log />
<h:form id="someForm">
<p:panelGrid columns="2">
<p:outputLabel for="myCalendar" value="Date: " />
<p:calendar id="myCalendar" onchange="alertDateSelected()" onselect="alertSelectEvent()" showOn="button" />
</p:panelGrid>
</h:form>
</h:body>
</html>
The Javascript code for the onselect and onchange events:
function alertDateSelected() {
PrimeFaces.info('Selected date from p:calendar');
}
function alertSelectEvent() {
PrimeFaces.info('Clicked p:calendar date selection button');
}
Is there a possibility to hook to the onchange/onselect event on p:calendar; eg if the user selects a date from the calendar panel or via the "Today" button? If so, what am I doing incorrectly?
4 answers
solution1
3 2015-02-16 15:37:23
Try it with ajax event lister. For example something like that:
<p:calendar id="myCalendar">
<p:ajax event="dateSelect" listener="alertDateSelected" global="false" />
</p:calendar>
solution2
3 2017-01-16 11:10:03
As of today, it's still not working in PrimeFaces 6.0.
The following approach uses the AJAX event instead. It calls the JavaScript method ( PF('ordersTable').filter() in this case) when it starts and cancels it instantly via return false . This way it only executes the JavaScript code, but does not really send the AJAX request.
<p:calendar onchange="PF('ordersTable').filter()" onselect="PF('ordersTable').filter()">
<!-- The JS onchange and onselect events don't work. We "misuse" an AJAX event instead. -->
<p:ajax event="dateSelect" onstart="PF('ordersTable').filter();return false;" global="false" />
</p:calendar>
solution3
0 2018-05-01 17:09:28
<p:ajax event="dateSelect" oncomplete="clickButton('searchFormRegUser:searchButton')" />
The problem was that I kept onchange event defined inside p:calendar and also this one (it remained because I was trying out a few things and forgot to delete another one). When I deleted onchange from p:calendar, this worked. I know this is old, but maybe someone else has a similar problem, so I'm posting.
solution4
0 2020-12-20 12:40:01
使用onSelect而不是onChanged 。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.