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

Question

我正在修改一个包含两个Calendar组件的页面，以选择开始日期和结束日期。我应该让他们检查开始日期在结束日期之前无论何时修改它们;如果开始日期设置在结束日期之后，或者相反，代码将结束日期更改为最大日期并弹出警告。

事件监听器正常运行，但结束日期日历无法更新以反映新值;并不是说它在监听器更改值之前就更新了──它根本就没有更新。

该项目运行在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不会触发。

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

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

Answer 1

您需要在开始日期日历的单击上设置一个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" /> 

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

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

Answer 2

首先: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.