日历控件的onselect/onchange事件未触发。

Question

日历控件的onselect/onchange事件未触发。

3

我正在尝试实现两个JavaScript函数，当用户从p:calendar中选择日期时立即调用这些函数。

不幸的是，只有在用户手动输入日期并向前切换标签时才会处理onchange事件。onselect事件根本没有被触发。

以下是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>

onselect和onchange事件的Javascript代码：

function alertDateSelected() {
    PrimeFaces.info('Selected date from p:calendar');
}

function alertSelectEvent() {
    PrimeFaces.info('Clicked p:calendar date selection button');
}

是否有可能在p:calendar的onchange/onselect事件上进行钩子;例如，如果用户从日历面板或通过“今天”按钮选择日期，是否可以实现？如果可以，那么我做错了什么？

- fatdevelops

你确定你的 JavaScript 文件在正确的位置并且被正确加载了吗？你应该在 JavaScript 控制台中寻找线索。 - kolossus

@kolossus 是的，我确定。如果您添加 <p:inputText id="myInput" onchange="alertDateSelected()"/>，那么 onchange 事件将被触发，并且您可以在 PrimeFaces 日志中看到预期的输出。在函数中添加断点后，确认了所报告的行为：如果您处理 p:inputText，则脚本会停止，但是如果您处理 p:calendar，则不会停止。如果事件没有被触发，请告诉我如何从控制台获取线索。我应该在哪里寻找提示？ - fatdevelops

4个回答

3

截至今天，在PrimeFaces 6.0中仍无法正常工作。

以下方法使用AJAX事件。它在开始时调用JavaScript方法（在这种情况下是PF（'ordersTable'）.filter（）），并立即通过return false取消。这样只执行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>

- noone

1

使用 onSelect 代替 onChanged。

- Yael

0

<p:ajax event="dateSelect" oncomplete="clickButton('searchFormRegUser:searchButton')" />

问题在于我将onchange事件定义在p:calendar内，同时还有另一个onchange事件（因为我试了几个东西，忘记删除另一个）。当我从p:calendar中删除onchange时，它就可以工作了。我知道这很老了，但也许其他人也有类似的问题，所以我发帖分享一下。

- K.Z.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gatschet · Accepted Answer

使用Ajax事件监听器来尝试。例如：

        <p:calendar id="myCalendar">
            <p:ajax event="dateSelect" listener="alertDateSelected" global="false" />
        </p:calendar>