Question

我正在尝试使用两个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事件;例如如果用户从日历面板中选择日期或通过＆＃34;今天＆＃34;按钮？如果是这样，我做错了什么？

Answer 1

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

Answer 2

尝试使用ajax事件侦听器。例如：

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

Answer 3

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

问题是我保持在p：calendar中定义的onchange事件以及这个（它仍然是因为我正在尝试一些事情而忘记删除另一个）。当我从p：calendar中删除onchange时，这很有效。我知道这是旧的，但也许其他人有类似的问题，所以我发帖。

Answer 4

使用 onSelect 而不是 onChanged。

p：日历onselect / onchange未触发

4 个答案: