How do I get PrimeFaces <p:selectOneMenu> to call valueChangeListener?

Question

Using PF 3.0-RC1 Snapshot (11/22/2011)

I have a in a composite component. I want to call the valueChangeListener when a selection is made, but it does not appear to be calling the listener.

Here is the code for the component:

<p:selectOneMenu style="width: 220px;" 
         value="#{customerProfileSessionBean.selectedAccount}"
         valueChangeListener="#{customerProfileSessionBean.accountValueChange}" >
    <f:selectItems value="#{sessionBean1.custAccountList}"/>
</p:selectOneMenu>

The listener in the backing bean has a print statement that is not being called (at least I do not see it in the server log).

Is there something else that I need to do to get the valueChangeListener to be called when the value changes? Do I need to use ?

Also, in the listener, is there a ValueChangeEvent that is passed?

Thanks.

Answer 1

You seem to be expecting that the valueChangeListener method in the server side is called immediately when a change event occurs on the client side. This is not correct. It will only be invoked when the form is submitted to the server and the new value does not equals() the old value.

There are at least two ways to achieve your functional requirement:

1. Add onchange="submit()" so that JavaScript will submit the form whenever you change the value:

   <p:selectOneMenu style="width: 220px;" 
      value="#{customerProfileSessionBean.selectedAccount}"
      valueChangeListener="#{customerProfileSessionBean.accountValueChange}"
      onchange="submit()">
       <f:selectItems value="#{sessionBean1.custAccountList}"/>
   </p:selectOneMenu>
   

   This is however very JSF-1.x-ish and poor for user experience. It will also submit (and convert/validate!) all other input fields which may not be what you want.

2. Make use of an ajax listener instead, for sure if you are not interested in the actual value change (i.e. the old value is not interesting for you), but you're actually interested in the change event itself. You can do this using <f:ajax> or in PrimeFaces components using <p:ajax>:

   <p:selectOneMenu style="width: 220px;" 
      value="#{customerProfileSessionBean.selectedAccount}">
       <p:ajax listener="#{customerProfileSessionBean.accountValueChange}" />
       <f:selectItems value="#{sessionBean1.custAccountList}"/>
   </p:selectOneMenu>
   

   And replace the ValueChangeEvent argument by the AjaxBehaviorEvent argument.