ajax 值更改侦听器在 primefaces 日历中不起作用

Value Change listener not working in primefaces calendar

提问by mrugeshthaker

I am using primefaces 3.2 and JSF 2.0

我正在使用 primefaces 3.2 和 JSF 2.0

My scenario is I have file date, last date and next date in my form. When user enters file date I need to update file date value in bean so it's value can be used as minimum date in last date of attribute mindate and so in next date selection.

我的情况是我的表单中有文件日期、最后日期和下一个日期。当用户输入文件日期时，我需要更新 bean 中的文件日期值，因此它的值可以用作属性 mindate 的最后日期的最小日期，因此在下一个日期选择中。

As per my knowledge value change listener can execute at form submission so I can not use it. I have used p:ajax. But still I am not able to set file date. As file date is not set it allows user to select last date and next date before date of file date.

根据我的知识值更改侦听器可以在表单提交时执行，因此我无法使用它。我用过p:ajax。但我仍然无法设置文件日期。由于未设置文件日期，它允许用户选择文件日期之前的最后一个日期和下一个日期。

caseMaster.xhtml

案例大师.xhtml

<p:calendar value="#{caseUitility.caseMaster.fileDate}" id="fileDate" effect="fadeIn" pattern="dd/MM/yyyy" readOnlyInputText="true">
    <p:ajax event="change" listener="#{caseUitility.dateChange}"/>
</p:calendar>

<p:calendar value="#{caseUitility.caseMaster.lastDate}" required="true" id="lastDate" effect="fadeIn" pattern="dd/MM/yyyy" readOnlyInputText="true" mindate="#{caseUitility.caseMaster.fileDate}" >
</p:calendar>

CaseUitility.java

案例实用程序

public void dateChange(ActionEvent ae) {
    System.out.println("File Date: " + caseMaster.getFileDate());
    System.out.println("Hello... I am in DateChange");
}

can any guide me what am I doing wrong here?

任何人都可以指导我我在这里做错了什么？

回答by Daniel

In more recent versions of PrimeFaces, SelectEventshould be usedsee the following code snippet

在最新版本的 PrimeFaces 中，SelectEvent应该使用看到以下代码片段

<p:calendar id="event" value="#{calendarView.date4}">
    <p:ajax event="dateSelect" listener="#{calendarView.onDateSelect}" update="msgs" />
</p:calendar>

public void onDateSelect(SelectEvent event) {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    SimpleDateFormat format = new SimpleDateFormat("dd/MM/yyyy");
    facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected", format.format(event.getObject())));
}

In older primefaces versions use DateSelectEvent

在旧的primefaces版本中使用 DateSelectEvent

<p:ajax event="dateSelect" listener="#{caseUitility.dateChange}"/>

public void dateChange(DateSelectEvent event) {
    Date date = event.getDate();
    System.out.println("File Date: " + date);
    System.out.println("Hello... I am in DateChange");
}

回答by roel

You should add an update to your p:ajax. I had problems when selecting a date with the datepicker and when manually typing it in the field. The change event was not triggerd both ways. Therefore I used an p:ajax and a f:ajax with different events.

您应该向 p:ajax 添加更新。在使用日期选择器选择日期以及在字段中手动输入日期时，我遇到了问题。更改事件不是双向触发的。因此我使用了 p:ajax 和 af:ajax 来处理不同的事件。

<p:calendar value="#{caseUitility.caseMaster.fileDate}" id="fileDate" effect="fadeIn" pattern="dd/MM/yyyy" readOnlyInputText="true">
    <p:ajax event="dateSelect" listener="#{caseUitility.dateSelect}" update="lastDate"/>
    <f:ajax event="change" execute="@this" render="lastDate" listener="#{caseUitility.dateChange}"/>
</p:calendar>

And in the bean

而在豆

public void dateSelect(DateSelectEvent event) {
    caseMaster.setFileDate(event.getDate());
    System.out.println("File Date: " + caseMaster.getFileDate());
    System.out.println("Hello... I am in DateChange");
}

public void dateChange(AjaxBehaviorEvent event) throws MWSException {
    System.out.println("File Date: " + caseMaster.getFileDate());
    System.out.println("Hello... I am in DateChange");
}

Hope this helps

希望这可以帮助

回答by NoX

My solution:

我的解决方案：

<p:ajax event="change" listener="#{caseUitility.dateChange}"/>

And in the bean:

在豆中：

public void dateChange(SelectEvent event) 
{   
      date = (Date)event.getObject();
}

回答by Annu

Use ajax event as dateSelect like

使用 ajax 事件作为 dateSelect 之类的

<p:calendar value="#{caseUitility.caseMaster.fileDate}" id="fileDate" effect="fadeIn" pattern="dd/MM/yyyy" readOnlyInputText="true">
        <p:ajax event="dateSelect" process="@this" update="lastDate" listener="#{caseUitility.dateChange}"/>
</p:calendar>   
<p:calendar value="#{caseUitility.caseMaster.lastDate}" required="true" id="lastDate" effect="fadeIn" pattern="dd/MM/yyyy" readOnlyInputText="true" mindate="#{caseUitility.caseMaster.fileDate}" >
</p:calendar>

Listener,

听众，

public void dateChange(SelectEvent event) {
    System.out.println("File Date: " + (Date) event.getObject());
    System.out.println("Hello... I am in DateChange");
}

but keep in mind that, you should not use any other component id in process (means only @this is allowed in process) otherwise listener will not work.

但请记住，您不应该在进程中使用任何其他组件 ID（意味着在进程中只允许使用 @this），否则监听器将无法工作。

回答by Andres Cárdenas

You can use onstartand oncomplete(does not appear in primefaces doc).

您可以使用onstart和oncomplete（不会出现在 primefaces 文档中）。

I solved with that:

我解决了：

<p:calendar
      id="fromDate"
      value="#{reportBean.fromDate}"
      pattern="dd/MM/yyyy"
      locale="es"
      maxdate="#{reportBean.untilDate}">
      <p:ajax event="dateSelect" 
          onstart="openModal();" 
          oncomplete="closeModal();"  
          update="untilDate div_report"/>
</p:calendar>

Javascript:

Javascript：

function openModal(){
    $('#mdlLoading').modal('open');
}
function closeModal(){
    $('#mdlLoading').modal('close');
}

Hope this help someone!

希望这对某人有所帮助！

回答by Agurno

I think you must consider doing this:

我认为你必须考虑这样做：

<p:calendar id="fileDate" value="#{caseUitility.caseMaster.fileDate}" navigator="true" effect="slideDown" mindate="#{caseUitility.today}" readOnlyInputText="true" pattern="dd/MM/yyyy HH:mm" required="true"  showOn="button" autocomplete="false">
    <p:ajax event="focus" listener="#{caseUitility.dateChange}" update="lastDate" />
</p:calendar>

public void dateChange()  {
     System.out.println("File Date: " + caseMaster.getFileDate());
}

If you use the "focus" event, it will be triggered on change or dateSelect for calendar primefaces control.

如果您使用“focus”事件，它将在更改或 dateSelect 时触发日历primefaces 控件。