p：日历 onselect/onchange 未触发

Posted 2023-05-07

技术标签:

【中文标题】p：日历 onselect/onchange 未触发【英文标题】：p:calendar onselect/onchange not fired 【发布时间】：2015-04-17 03:14:15 【问题描述】：

我试图让两个 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 事件；例如如果用户从日历面板或通过“今天”按钮选择日期？如果是这样，我做错了什么？

【问题讨论】：

您确定您的 javascript 位于正确的位置并因此被正确加载吗？你应该在你的 javascript 控制台中寻找线索 @kolossus 是的，我确定。如果添加<p:inputText id="myInput" onchange="alertDateSelected()"/>，则会触发 onchange 事件，您可以在 PrimeFaces 日志中看到预期的输出。向函数添加断点后，报告的行为得到确认：如果处理p:inputText，脚本将停止，但如果处理p:calendar，则不会停止。如果事件没有被触发，请告诉我如何从控制台获取线索。我在哪里可以找到这方面的提示？ 【参考方案1】：

用 ajax 事件列表器试试。比如这样的：

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

【讨论】：

谢谢，但我想弹出一个快速对话框并在 Javascript 代码中做一些基本的 CSS 样式。我宁愿避免用一些支持豆做这个。那怎么样？【参考方案2】：

截至今天，它仍然无法在 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>

【讨论】：

【参考方案3】：

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

问题是我保留了在 p:calendar 和这个中定义的 onchange 事件（它仍然存在，因为我正在尝试一些事情并且忘记删除另一个）。当我从 p:calendar 中删除 onchange 时，它起作用了。我知道这是旧的，但也许其他人也有类似的问题，所以我发布了。

【讨论】：

【参考方案4】：

使用onSelect 代替onChanged。

【讨论】：

以上是关于p：日历 onselect/onchange 未触发的主要内容，如果未能解决你的问题，请参考以下文章