getting value from radiobutton group that is binded to a managed bean

Question

On my XPage I have a radio button group control which is binded to a managed bean:

<xp:radioGroup value="#{employeeBean.employee.staffMember}" id="radioStaff">
    <xp:selectItem itemLabel="Yes" />
    <xp:selectItem itemLabel="No" />
    <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="radioStaffDept"></xp:eventHandler>
</xp:radioGroup>

When set to Yes I would like to display another input field to enter the department.

I have tried to set the visibility via the partial refresh option but I always get the value returned how it is set via my bean.

I tested to collect it's value via:

<xp:text escape="true" id="computedField1">
    <xp:this.value><![CDATA[#{javascript:
var radio1:com.ibm.xsp.component.xp.XspInputRadio = getComponent("radioStaff");
return radio1.getValue()}]]></xp:this.value>
</xp:text>

So when loaded and the value is No, if I set the radiobutton to Yes it remains No.

How should I collect the (changed) value from the radiobutton?

Ps I tried adding a binding property (e.g. binding="#{myValue}") but got same undesired result via this method.

PPs I also tried to set the staffMember field on the onChange event but this did not work either (employeeBean.employee.setStaffMember("Yes");)

===

I am not sure if I understood it correctly Yes with the following code I can check if a person is a staff member, but how do I write (temporarely) value back to my proposal object in my bean when I change options in the radio button?

private Employee employee;

    public Boolean isStaffMember(){
        if (employee.getStaffMember()=="Yes"){
            return false;
        }
        else{
            return true;
        }
    }

    public void setStaffMember(String value){
        employee.setStaffMember(value);
    }


  <xp:radioGroup
                            value="#{employeeBean.employee.staffMember}"
                            binding="#{staffMember}" id="radioStaffMember">
                            <xp:selectItem itemLabel="Yes" />
                            <xp:selectItem itemLabel="No" />
                            <xp:eventHandler event="onchange"
                                submit="true" refreshMode="partial"
                                refreshId="pnlStaffMemberDept" >
                                <xp:this.action><![CDATA[#{javascript:var thisVal = getComponent("radioStaffMember").getValue();
employeeBean.setStaffMember(thisVal);}]]></xp:this.action>
                            </xp:eventHandler>
                        </xp:radioGroup>

Answer 1

Consider the following:

<p>Staff member?</p>

<xp:radioGroup value="#{employeeBean.employee.staffMember}"
    id="radioStaff">
    <xp:selectItem itemLabel="Yes" />
    <xp:selectItem itemLabel="No" />
    <xp:eventHandler event="onchange" submit="true"
        execMode="partial" refreshMode="partial" refreshId="examples" />
</xp:radioGroup>

<xp:div id="examples">
    <xp:text disableOutputTag="true"
        rendered="#{not empty employeeBean.employee.staffMember}">
        <p>
            <xp:text value="The value is: #{employeeBean.employee.staffMember}" />
        </p>

        <p>
            <xp:text value="A staff member (checkbox string value evaluation)"
                rendered="#{employeeBean.employee.staffMember eq 'Yes'}" />
        </p>

        <p>
            <xp:text value="A staff member (boolean value evaluation)"
                rendered="#{employeeBean.staffMember}" style="color: green" />
        </p>

        <p>
            <xp:text value="Not a staff member (boolean value evaluation)"
                rendered="#{not employeeBean.staffMember}" style="color: red" />
        </p>
    </xp:text>
</xp:div>

And the bean composition. I used a map because I don't know anything about your Employee class :) :

public class EmployeeBean implements Serializable {

  private static final long serialVersionUID = 1L;

  private Map<String, Object> employee;

  public Map<String, Object> getEmployee() {
    if (employee == null) {
        employee = new HashMap<String, Object>();
    }

    return employee;
  }

  public boolean isStaffMember() {
        return "Yes".equals(getEmployee().get("staffMember"));
  }

}

Some pieces of advice:

1. Try to use as less javascript language as you can. It won't help you in the long run. Besides, source is painful to watch. Use EL expressions as much as you can, strive for always
2. Don't compare Java string with == but rather with .equals
3. Make sure that the block you want to refresh can actually be refreshed (see why I left the xp:div id="example always visible but then added an inner tag that checks on the staffMember value). It doesn't mean you will necessarily have to do that. It depends on how you structure your XPage.
4. Narrow the POST scope with execMode. Strive for performance