PrimeFaces 4.0: How to programmatically check SelectOneRadio on ClientSide

Question

I have the following JSF-Code:

<p:selectOneRadio id="contactPersonGender" value="#{myBean.contactPersonGender}"> 
    <f:selectItems value="#{data.getGenders()}" var="gender" itemValue="#{gender}" itemLabel="#{gender.label}" />
</p:selectOneRadio>

<p:commandButton onclick="copyFromContactToManager();" ajax="false" type="button" update="@form"/>

<p:selectOneRadio id="managerGender" value="#{myBean.managerGender}">   
        <f:selectItems value="#{data.getGenders()}" var="gender" itemValue="#{gender}" itemLabel="#{gender.label}" />
</p:selectOneRadio>

I now want to copy the selection from contactPersonGender to managerGender when the button is clicked. data.getGenders() returns an array of the enum type "Gender" (MALE or FEMALE). So for example when FEMALE is selected in contactPersonGender then managerGender should also get FEMALE selected when the button is clicked.

I have tried the following codes:

function copyFromContactToManager(){
    $("input[id^='" + contactPersonGender + "']").each(function(index, element) {
        if ($(element).prop("checked")) {
                $("input[id^='managerGender:" + index + "']").first().click();
        }
    });
}

OR:

function copyFromContactToManager(){
    $("input[id^='" + contactPersonGender + "']").each(function(index, element) {
        $("input[id^='managerGender:" + index + "']").prop("checked", $(element).prop("checked"));
    }
}

Both of them work, but the UI is not updated after performing a click on my button (So for example if in contactPersonGender "MALE" is selected and in managerGender "FEMALE" is selected, after clicking the button in managerGender "FEMALE" seems still to be selected. But if I send the form to the server and persist the data, managerGender has the expected value of "MALE").

why have you set ajax false on button..? Please try to have a look at some examples — Makky, Feb 09 '14 at 14:31
When my command button is clicked and in contactPersonGender the radio 0 ("MALE") is checked I want managerGender to also have radio 0 ("MALE") checked. When radio 1 ("FEMALE") is checked I want maangerGender to also have radio 1 checked. On my page you can edit a companies contact person as well as its manager. When the manager is the same person as the contact person I provide a command button that copies all the contact persons properties to the manager (on client side), for example the name, email address and the gender (which is my problem). I hope you can understand my problem :-) — AToZDev, Feb 09 '14 at 15:47
I am going to provide you an example for you problem. I am sure that will help you . — Makky, Feb 09 '14 at 16:02
Have a look at my example now. It should do what you're after ! — Makky, Feb 09 '14 at 16:10

score 2 · Accepted Answer · answered Feb 09 '14 at 16:09

You are trying to do an easy job but the code you have is irrelavant. You don't need any JS to do this.

Have a look at the example I am providing here

XHTML Code

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>


</h:head>


<h:body>

    <style media="screen" type="text/css">
.ui-widget,.ui-widget .ui-widget {
    font-size: 90% !important;
}
</style>


    <h:form>
        <p:panel header="Contact Person">
            <h:panelGrid columns="2">
                <h:outputText value="Select Gender"></h:outputText>
                <p:selectOneRadio id="contactPersonGender"
                    value="#{testBean.contactPersonGender}">
                    <f:selectItems value="#{testBean.genders}" var="gender"
                        itemLabel="#{gender.name}" />
                </p:selectOneRadio>
            </h:panelGrid>
        </p:panel>
        <p:separator></p:separator>
        <p:commandButton value="Copy to Manager"
            actionListener="#{testBean.copyToManager}" update="managerPanel"></p:commandButton>
        <p:separator></p:separator>
        <p:panel header="Manager Person" id="managerPanel">
            <h:panelGrid columns="2">
                <h:outputText value="Select Gender"></h:outputText>
                <p:selectOneRadio id="managerGender"
                    value="#{testBean.managerGender}">
                    <f:selectItems value="#{testBean.genders}" var="gender"
                        itemLabel="#{gender.name}" />
                </p:selectOneRadio>
            </h:panelGrid>
        </p:panel>


    </h:form>

</h:body>
</html>

ManagedBEAN

package reg.bean;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;

@ManagedBean(name = "testBean")
@ViewScoped
public class TestBean {

    private GENDER contactPersonGender;
    private GENDER managerGender;
    private GENDER[] genders;

    public TestBean() {
        genders = GENDER.values();
    }

    public void processForm(ActionEvent event) {
        System.out.println("Contact person Gender " + contactPersonGender.getName());
        System.out.println("Manager Gender " + managerGender.getName());
    }

    public void copyToManager(ActionEvent event){
        this.managerGender=this.contactPersonGender;
    }

    public GENDER[] getGenders() {
        return genders;
    }

    public void setGenders(GENDER[] genders) {
        this.genders = genders;
    }

    public GENDER getContactPersonGender() {
        return contactPersonGender;
    }

    public void setContactPersonGender(GENDER contactPersonGender) {
        this.contactPersonGender = contactPersonGender;
    }

    public GENDER getManagerGender() {
        return managerGender;
    }

    public void setManagerGender(GENDER managerGender) {
        this.managerGender = managerGender;
    }
}

Gender CLASS ENUM

package reg.bean;

public enum GENDER {
    MALE("Male"), FEMALE("Female");
    private String name;

    GENDER(String name) {
        this.name = name;
    }

    public String getName() {
        return this.name;
    }
}

Now, If you select MALE at contact person and FEMALE on manager and if you press the button then manager will be FEMALE . UI will be updated.

Output

Ok, thank you so far...I had this server side solution before, but I tried to achieve it at client side. But I will now use this solution before wasting more time on this (for me) nice to have client side feature:-) — AToZDev, Feb 09 '14 at 16:21
You should use this solution. End of the day you have to use server so why not this way ! — Makky, Feb 09 '14 at 16:24
@Makky Your code helped me so much with populating my selectOneButton from the database! — iozee, Aug 24 '14 at 20:04

PrimeFaces 4.0: How to programmatically check SelectOneRadio on ClientSide

1 Answers1