在更改 Ajax 事件验证新值后，如何强制更新 Primefaces 日历？

Question

我正在修改一个包含两个日历组件的页面，以选择开始日期和结束日期。每当您修改其中任何一个时，我都应该让他们检查开始日期是否早于结束日期；如果开始设置在结束之后，反之亦然，代码会将结束日期更改为最大日期并弹出警告。

事件监听器正常运行，但结束日期日历未能更新以反映新值；并不是它在监听器改变值之前更新——它根本没有更新。

该项目在 Primefaces 5.3 和 Java 1.6 上运行。这是 xhtml（为了便于阅读而减去样式）：

<p:outputPanel id="fl83">
    <p:outputPanel id="fl83c3">
        <h:outputLabel value="Start date" for="fechaInicioMP" />
        <p:calendar locale="es" pattern="dd/MM/yyyy" id="fechaInicioMP"
            maxdate="#{filtroFechasBB.fechaMaxFin}" value="#{filtroFechasBB.fechaInicio}"
            onSelectUpdate=":f183" >
            <p:ajax event="blur" />
            <f:ajax event="change" listener="#{filtroFechasBB.fechaInicioTextChange}"
                render="@this" update="@form" />
            <p:ajax event="dateSelect" listener="#{filtroFechasBB.fechaInicioClickChange}"
                update="@form" />
        </p:calendar>
    </p:outputPanel>
    <p:outputPanel id="fl83c4">
        <h:outputLabel value="End date" for="fechaFinMP" />
        <p:calendar locale="es" pattern="dd/MM/yyyy" id="fechaFinMP"
            maxdate="#{filtroFechasBB.fechaMaxFin}" value="#{filtroFechasBB.fechaFin}"
            onSelectUpdate=":f183" >
            <p:ajax event="blur" />
            <f:ajax event="change" listener="#{filtroFechasBB.fechaFinTextChange}"
                render="@this" update=":fl83" />
            <p:ajax event="dateSelect" listener="#{filtroFechasBB.fechaFinClickChange}"
                update=":fl83" />
        </p:calendar>
    </p:outputPanel>
</p:outputPanel>

这些是听众：

    public void fechaFinTextChange() {
    if(fechaFin.after(fechaMaxFin)) {
        fechaFin = fechaMaxFin;
        addErrorMessage(FFIN_AFTER_FMAX);
    }
    compareInicioBeforeFin();
}

public void fechaFinClickChange(SelectEvent event) {
    setFechaFin((Date)event.getObject()); // I couldn't find out why this is here given that
                                          // the setter has already been called
    compareInicioBeforeFin();
    if (updateMetodoEntreBB != null) {
        ajaxActualiza(event, OpcionesAjax.F_FIN);
    }
}

// fechaInicioTextChange and fechaInicioClickChange do pretty much the same as these two

private void compareInicioBeforeFin() {
    if(fechaInicio.after(fechaFin)) {
        fechaFin = fechaMaxFin;
        addErrorMessage(FINI_AFTER_FFIN);
    }
}

有两个 Ajax 事件，因为当您单击日历时不会触发 JSF 更改事件，而当您输入日期时不会触发 PrimeFaces dateSelect。

我已经尝试了日历中的 onSelectUpdate 以及两个 ajax 事件的渲染和更新，将它们设置为 @this、@form、结束日期日历的 ID、两个日历的 ID、日历的 outputPanel 的 ID 和公共 outputPanel 的ID 和该死的日历而已。不会更新。

我束手无策，我的 Google Fu 也找不到任何可行的解决方案。

Answer 1

首先：f:ajax 没有 update 属性，在 f:ajax 中你需要使用 render 属性。

带有 ajax oncomplete 属性的 p:remoteCommand 应该可以解决问题：

<p:outputPanel id="fl83">
<p:remoteCommand name="updateCalendar" update="fl83" />
    <p:outputPanel id="fl83c3">
        <h:outputLabel value="Start date" for="fechaInicioMP" />
        <p:calendar locale="es" pattern="dd/MM/yyyy" id="fechaInicioMP"
            maxdate="#{filtroFechasBB.fechaMaxFin}" value="#{filtroFechasBB.fechaInicio}"
            onSelectUpdate=":f183" >
            <p:ajax event="blur" />
            <f:ajax event="change" listener="#{filtroFechasBB.fechaInicioTextChange}"
                oncomplete="updateCalendar()" />
            <p:ajax event="dateSelect" listener="#{filtroFechasBB.fechaInicioClickChange}"
                oncomplete="updateCalendar()" />
        </p:calendar>
    </p:outputPanel>
    <p:outputPanel id="fl83c4">
        <h:outputLabel value="End date" for="fechaFinMP" />
        <p:calendar locale="es" pattern="dd/MM/yyyy" id="fechaFinMP"
            maxdate="#{filtroFechasBB.fechaMaxFin}" value="#{filtroFechasBB.fechaFin}"
            onSelectUpdate="f183" >
            <p:ajax event="blur" />
            <f:ajax event="change" listener="#{filtroFechasBB.fechaFinTextChange}"
                oncomplete="updateCalendar()" />
            <p:ajax event="dateSelect" listener="#{filtroFechasBB.fechaFinClickChange}"
                oncomplete="updateCalendar()" />
        </p:calendar>
    </p:outputPanel>
</p:outputPanel>

如果这不能解决问题：您是否有一个可以修改 id 的表单？如果您没有 prependId="false" form1 将添加到表单内的每个 id。因此，您需要使用 exampleForm:fl83 访问面板。

Answer 2

你需要在开始日期日历的点击上设置一个ajax事件：

<p:calendar id="start_date" pattern="dd/MM/yyyy HH:mm"  value="#{managedBean.startDate}"  size="20" >
    <p:ajax event="dateSelect" listener="#{managedBean.OnSelectDate()}" update=":form:end_date" />
</p:calendar>   

<p:calendar id="end_date"  pattern="dd/MM/yyyy HH:mm" mindate="#{managedBean.startDate}"  value="#{managedBean.endDate}"  size="20" /> 

当您选择触发将 endDate 设置为 null 的方法的 startDate 并更新 endDate 日历时，该日历受 mindate="#{managedBean.startDate}" 限制

public void OnSelectDateSouhaite() {
    this.setEndDate(null);
}