CODEWITHSUNDEEP
jsfjsf-2
Raymond Nakampe
Raymond Nakampe

Reputation: 371

JSF rendered component not binding with ajax call

I need help to render a component that will in turn make an ajax call after it has been rendered but with no success. I have the following code which doesn't work. I don't know if I am missing something. Any help is highly appreciated.

 <h:selectOneMenu id="gender" value="#{bean.gender}"  
     class="form-control"
     valueChangeListener="#{bean.updateGenderValue}" 
     onchange="submit()">

   <f:selectItems value="#{bean.genders}" var="gender" itemLabel="#
      {gender}" itemValue="#{gender}"/>                                                               
 </h:selectOneMenu> 

 <h:selectOneMenu value="#{bean.pregnancyStatus}"  
    class="form-control"
    rendered="#{bean.gender eq 'Female'}">
    <f:selectItems value="#{bean.options}" 
      var="pregnancyStatus" itemLabel="#{pregnancyStatus}" 
       itemValue="#{pregnancyStatus}"/>

   <f:ajax listener="#{bean.updatePregancyValue}" 
            execute="@this" render="@this"/>

</h:selectOneMenu> 


 public void updateGenderValue(ValueChangeEvent event) throws IOException {
    gender = (String) event.getNewValue();
 }

        public void updatePregancyValue(AjaxBehaviorEvent event) throws IOException {                                                                            
      System.out.println(":( == " + pregnancyStatus);
      }

The pregnancyStatus value is never updated at all.

Upvotes: 0

Views: 284

Answers (1)

pwain
pwain

Reputation: 279

Did you missed the <h:form>? I copied and pasted your code in my project and

my code:

<div style="height:500px">
<h:form>

<h:selectOneMenu id="gender" value="#{bean.gender}"  
 class="form-control"
 valueChangeListener="#{bean.updateGenderValue}" 
 onchange="submit()">



<f:selectItems value="#{bean.genders}" var="gender" itemLabel="#
      {gender}" itemValue="#{gender}"/>                                                               
 </h:selectOneMenu> 

 <h:selectOneMenu value="#{bean.pregnancyStatus}"  
    class="form-control"
    rendered="#{bean.gender eq 'Female'}">
    <f:selectItems value="#{bean.options}" 
      var="pregnancyStatus" itemLabel="#{pregnancyStatus}" 
       itemValue="#{pregnancyStatus}"/>

   <f:ajax listener="#{bean.updatePregancyValue}" 
            execute="@this" render="@this"/>

</h:selectOneMenu>

lets check the console :

:( == 2
:( == 3

Bean:

@ManagedBean(name = "bean")
@ViewScoped
public class Bean {

    private String pregnancyStatus;
    private List<SelectItem> options;
    private List<SelectItem> genders;
    private String gender;

    @PostConstruct
    public void initBean(){
        options = new ArrayList<>();
        genders = new ArrayList<>();
        options.add(new SelectItem("1"));
        options.add(new SelectItem("2"));
        options.add(new SelectItem("3"));
        genders.add(new SelectItem("Male"));
        genders.add(new SelectItem("Female"));
        genders.add(new SelectItem("third"));
    }

    public String getPregnancyStatus() {
        return pregnancyStatus;
    }

    public void setPregnancyStatus(String pregnancyStatus) {
        this.pregnancyStatus = pregnancyStatus;
    }

    public void updateGenderValue(ValueChangeEvent event) throws IOException {
        gender = (String) event.getNewValue();
    }

    public void updatePregancyValue(AjaxBehaviorEvent event) throws IOException {
        System.out.println(":( == " + pregnancyStatus);
    }

}

Upvotes: 1

Related Questions