p:calendar onselect/onchange 未触发
[英]p:calendar onselect/onchange not fired
问题描述
I am trying to have two Javascript functions that are being called as soon as a user selects a date from ap:calendar.
我试图让两个 Javascript 函数在用户从 ap:calendar 中选择一个日期时立即被调用。
Unfortunately, the onchange event is only being processed if the user types a date manually in the text field and tabs forward.不幸的是，只有当用户在文本字段中手动输入日期并向前选项卡时，才会处理 onchange 事件。 The onselect event is not being fired at all. onselect 事件根本没有被触发。
The xhtml is as follows: xhtml如下：
<!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: onselect 和 onchange 事件的 Javascript 代码：
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;是否有可能挂钩 p:calendar 上的 onchange/onselect 事件； eg if the user selects a date from the calendar panel or via the "Today" button?例如，如果用户从日历面板或通过“今天”按钮选择日期？ If so, what am I doing incorrectly?如果是这样，我做错了什么？
4 个解决方案
解决方案1
3 2015-02-16 15:37:23
Try it with ajax event lister.用 ajax 事件列表器试试。 For example something like that:例如这样的事情：
<p:calendar id="myCalendar">
<p:ajax event="dateSelect" listener="alertDateSelected" global="false" />
</p:calendar>
解决方案2
3 2017-01-16 11:10:03
As of today, it's still not working in PrimeFaces 6.0.截至今天，它仍然无法在 PrimeFaces 6.0 中工作。
The following approach uses the AJAX event instead.以下方法改为使用 AJAX 事件。 It calls the JavaScript method ( PF('ordersTable').filter() in this case) when it starts and cancels it instantly via return false .它在启动时调用 JavaScript 方法（在本例中为PF('ordersTable').filter() ，并通过return false立即取消它。 This way it only executes the JavaScript code, but does not really send the AJAX request.这样它只执行 JavaScript 代码，而不会真正发送 AJAX 请求。
<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>
解决方案3
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).问题是我保留了在 p:calendar 和这个内部定义的 onchange 事件（它仍然存在是因为我尝试了一些事情而忘记删除另一个）。 When I deleted onchange from p:calendar, this worked.当我从 p:calendar 中删除 onchange 时，这奏效了。 I know this is old, but maybe someone else has a similar problem, so I'm posting.我知道这是旧的，但也许其他人也有类似的问题，所以我发布了。
解决方案4
0 2020-12-20 12:40:01
使用onSelect而不是onChanged 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.