PrimeFaces 4.0: How to programmatically check SelectOneRadio on ClientSide

StackOverflow https://stackoverflow.com/questions/21659917

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").

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top