f:ajax not working when dropdown return null

Question

The dropdown is linked with converter. The ajax works when dropdown value is changed. But in case of selection of "-- Select --" item from dropdown, ajax does not invoke listener. I could not find any good solution. Code is given below.

<h:selectOneMenu value="#{cc.attrs.beanProperty}" converter="myConverter" >
  <f:selectItem itemValue="#{null}" itemLabel="-- Select --" />
  <f:selectItems value="#{cc.attrs.list}" var="item" itemValue="#{item}" itemLabel="#{item.name}" />
  <f:ajax render=":form1" listener="#{myBean.listener}"/>
</h:selectOneMenu>

Converter:

@FacesConverter(value = "myConverter")
public class VendorConverter implements Converter {

    @Inject ObjectDAO dao;

    @Override
    public Object getAsObject(FacesContext context, UIComponent component, String value) {
        if(value == null || value.contains("Select")){
            return null;            
        }
        return dao.find(Integer.valueOf(value));
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component, Object value) {
        if(value == null) {
            return null;
        }                  
        return ((MyObject) value).getId().toString();
    }    
}

Could anybody point the solution?

Answer 1

I found a tricky solution for the said problem. I would like to share for you. I have place a h:commandButton and use jquery to click the event. So when user select the -- Select -- Item from dropdown it executes the necessary function.

<h:selectOneMenu value="#{cc.attrs.beanProperty}" converter="myConverter" onchange="selectedItem(this)" >
  <f:selectItem itemValue="#{null}" itemLabel="-- Select --" />
  <f:selectItems value="#{cc.attrs.list}" var="item" itemValue="#{item}" itemLabel="#{item.name}" />
  <f:ajax render=":form1" listener="#{myBean.listener}"/>
</h:selectOneMenu>

<h:commandButton class="reset" action="#{mybean.reset}" style="display: none;">            
    <f:ajax render="#{cc.attrs.renderComponent}"/>
</h:commandButton>


<script>
     function selectedItem(that) {                  
         if($(that).val() === ""){
               $(".reset").click();
         }
     }
</script>

Answer 2

Since the f:ajax is not being triggered by the itemValue="#{null}" or the noSelectionOption="true" (which is better anyway than the null usage) I would recommend the following, prevent from the user to go back to the -- Select -- value after he already selected something

(unless you really want the user to go back to the -- Select -- option after he already picked some other option)

1) Replace

<f:selectItem itemValue="#{null}" itemLabel="-- Select --" />

with

<f:selectItem noSelectionOption="true" itemLabel="-- Select --" />

2) Add the use of itemDisabled like this

<f:selectItem itemDisabled="#{not empty cc.attrs.beanProperty}" 
    noSelectionOption="true" itemLabel="-- Select --" />

or instead of the itemDisabled="#{not empty cc.attrs.beanProperty}" just use the <h:selectOneMenu hideNoSelectionOption="true"> depend on your preferences.

---

Also, note that in order to find out whats wrong with your code you can try using placing a <h:message or <h:messages in your page