Disable if the selection box value is DOB

Question

Hi guys im trying to disable a selectOneRadio selection if the user have selected DOB from dropdown menu but it is still rendering the selectionOneRadio button

here is the code

   Please select the criteria you wish to search :

      <p:selectOneMenu value="#{bean.criteria}" effect="fade"
                                 filterMatchMode="startsWith"
                                 style="width:230px" 
                                 >
        <f:selectItem itemLabel="#{bundle.labelUsername}" itemValue="username" />
        <f:selectItem itemLabel="#{bundle.labelFirstName}" itemValue="firstName" />  
        <f:selectItem itemLabel="#{bundle.labelSurname}" itemValue="surname" />  
        <f:selectItem itemLabel="#{bundle.labelGender}" itemValue="gender" />  
        <f:selectItem itemLabel="#{bundle.labelDOB}" itemValue="DateOfBirth" />  
        <f:selectItem itemLabel="#{bundle.labelPhone}" itemValue="telephoneNumber" />  
        <f:selectItem itemLabel="#{bundle.labelEmail}" itemValue="emailAddress" />  
        <p:ajax update="searchMatch" event="valueChange"/>
      </p:selectOneMenu>




   Please select if you would like an exact or partial match

      <p:selectOneRadio id="searchMatch" value="#{bean.match}" style="width:230px" 
                                  required = "True"
                                  requiredMessage = "#{bundle.requiredMatch}"
                                  rendered="#{bean.criteria !='DateOfBirth'}">
         <f:selectItem itemLabel="Exact" itemValue="=" />  
         <f:selectItem itemLabel="Partial" itemValue="LIKE " />
      </p:selectOneRadio>

how can i get it so that when DateOfBirth is selected the one radio button is disabled

Answer 1

You can't ajax-update a component which is by itself conditionally rendered. The JavaScript responsible for changing the HTML DOM tree based on JSF ajax response can only replace HTML DOM elements, not add/remove them in their entirety.

Instead, you need to ajax-update a parent component which is always rendered.

<p:selectOneMenu ...>
    ... 
    <p:ajax update="searchMatchGroup" />
</p:selectOneMenu>

<h:panelGroup id="selectMatchGroup>
    <p:selectOneRadio ... rendered="#{bean.criteria !='DateOfBirth'}">
        ...
    </p:selectOneRadio>
</h:panelGroup>

See also:

• Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

Answer 2

You have to add a listener at change event of <p:selectOneMenu>. That method update a boolean property of backing managed bean. That property enable and disable the <p:selectOneRadio>.

As for example change your <p:ajax> into

<p:ajax update="searchMatch" listener="bean.updateRadio"/>

And updateRadio method will be :

public void updateRadio(AjaxBehaviorEvent event){
   if(criteria ==  DOB)// check here if selected item is DOB ??
     {match=true}
   else match=false;
}

match is initialized with value false. I think this may solve your problem.