Primefaces - Ajax - Select Components

Question

I'm using this primafaces example http://www.primefaces.org/showcase/ui/pprSelect.jsf, but I'm having problem when I put the first p:selectOneMenu as required true, it isn't clean the second p:selectOneMenu when I choose the first option again. Regards

Answer 1

What happens here is that when you try to "unselect" the first p:selectOneMenu, you end up triggering a validation rule.

You can do what you want by using two remoteCommand tags and JavaScript.

<p:remoteCommand name="makeSelection" process="select" update="suburbs" />
<p:remoteCommand name="clearSelection" process="@this" update="suburbs" >
    <f:setPropertyActionListener value="#{null}" target="#{pprBean.city}" />  
</p:remoteCommand>

Now you can decide which one to call using a javascript funcion

<p:selectOneMenu id="city" required="true" value="#{pprBean.city}" onchange="selectFunction(this)">
...

function selectFunction(el){
    //if el.value is empty you call clearSelection();
    //else you call makeSelection();
}

Another common solution is using a commandButton that clears the selection calling something like:

<p:commandButton update="suburbs" (...)>
  <f:setPropertyActionListener target="#{pprBean.city}" value="#{null}" />
</p:commandButton>