JSF Ajax Implementation for dynamic components :SelectOneRadio

Question

Can any one please let me know how can i add ajax behaviour to dynamically created SelectOneRadio. The Requirement is when i select any one of the radio button ,i want to display jsf dynamically created fieldset. I tried the below .But no luck!!!!Can anybody help on this ????

AjaxBehavior ajax=(AjaxBehavior) FacesContext.getCurrentInstance().getApplication().createBehavior(AjaxBehavior.BEHAVIOR_ID); 
ajax.addAjaxBehaviorListener(new CustomAjax());
ajax.setTransient(true);
radio.addClientBehavior("change",ajax);


public class CustomAjax implements AjaxBehaviorListener{

@Override
public void processAjaxBehavior(AjaxBehaviorEvent arg0)
        throws AbortProcessingException {
    System.out.println("Ajax :"+arg0.getComponent());

}

}

Using JSF2 and primefaces 3.4.1

I tried the solution given by user2251135....no luck.. Let me clarify the question : I want to get the below xhtml functionality programmatically:

<p:selectOneRadio id="customRadio" value="#{test.panel1}"
                        layout="pageDirection">
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
<p:ajax update="payment-amount-panel" />
</p:selectOneRadio>
<h:panelGroup id="payment-amount-panel">
<p:fieldset legend="Legend1" rendered="#{test.panel1 == '1'}">
<h:outputText value="Francis Ford Coppola's1 " />
</p:fieldset>
<p:fieldset rendered="#{test.panel1 == '2'}">
<h:outputText value="Francis Ford Coppola's2" />
</p:fieldset>
<p:fieldset rendered="#{test.panel1 == '3'}">
<h:outputText value="Francis Ford Coppola's3" />
</p:fieldset>

</h:panelGroup>

And Bean

@ManagedBean (name="test")
@ViewScoped
public class Test {

private String panel1;

public void setPanel1(String panel1){
this.panel1 = panel1;
}

public String getPanel1(){
return this.panel1;
}
}

Firstly ,thanks user2251135 for the reply on the question.

Can anyone of you be kind enough to help me on this?

Daniel Teleginski Camargo Daniel Teleginski Camargo · Accepted Answer · 2013-12-18T14:58:31

Here is a more complete solution:

Project Dependencies

<dependencies>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-api</artifactId>
        <version>2.1.2</version>
    </dependency>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-impl</artifactId>
        <version>2.1.2</version>
    </dependency>
    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>3.4.1</version>
    </dependency>
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3</version>
    </dependency>
    <dependency>
        <groupId>javax</groupId>
        <artifactId>javaee-web-api</artifactId>
        <version>6.0</version>
        <scope>provided</scope>
    </dependency>
</dependencies>

The ManagedBean

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.el.ELContext;
import javax.el.MethodExpression;
import javax.el.ValueExpression;
import javax.faces.application.Application;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.component.UIForm;
import javax.faces.component.UISelectItems;
import javax.faces.context.FacesContext;
import javax.faces.model.SelectItem;
import org.primefaces.component.behavior.ajax.AjaxBehavior;
import org.primefaces.component.behavior.ajax.AjaxBehaviorListenerImpl;
import org.primefaces.component.selectoneradio.SelectOneRadio;

@ViewScoped
@ManagedBean
public class SampleMBean implements Serializable {

    private String selectedValue;

    private UIForm form;

    public void createRadio() {

        form.getChildren().clear();
        Application application = FacesContext.getCurrentInstance()
            .getApplication();

        AjaxBehavior ajax = new AjaxBehavior();
        ajax.addAjaxBehaviorListener(new AjaxBehaviorListenerImpl(
            createActionMethodExpression("#{sampleMBean.processAction}")));
        ajax.setUpdate("@form");

        SelectOneRadio radio = (SelectOneRadio) application.createComponent(SelectOneRadio.COMPONENT_TYPE);
        radio.setId("radioId");
        ValueExpression vExp = createValueExpression("#{sampleMBean.selectedValue}", String.class);
        radio.setValueExpression("value", vExp);
        radio.addClientBehavior("change", ajax);

        List<SelectItem> items = new ArrayList<SelectItem>();
        items.add(new SelectItem("1", "1"));
        items.add(new SelectItem("2", "2"));
        items.add(new SelectItem("3", "3"));

        UISelectItems selectItems = new UISelectItems();
        selectItems.setValue(items);
        radio.getChildren().add(selectItems);

        form.getChildren().add(radio);
    }

    public MethodExpression createActionMethodExpression(String name) {
        FacesContext facesCtx = FacesContext.getCurrentInstance();
        ELContext elContext = facesCtx.getELContext();
        return facesCtx
            .getApplication()
            .getExpressionFactory()
            .createMethodExpression(elContext, name, String.class,
                new Class[]{});
    }

    public ValueExpression createValueExpression(String valueExpression,
        Class<?> valueType) {
        FacesContext context = FacesContext.getCurrentInstance();
        return context
            .getApplication()
            .getExpressionFactory()
            .createValueExpression(context.getELContext(), valueExpression,
                valueType);
    }

    public void processAction() {
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage("Info", "SelectedValue = " + selectedValue));
    }

    public UIForm getForm() {
        return form;
    }

    public void setForm(UIForm form) {
        this.form = form;
    }

    public String getSelectedValue() {
        return selectedValue;
    }

    public void setSelectedValue(String selectedValue) {
        this.selectedValue = selectedValue;
    }

}

The View

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Demo</title>
            </f:facet>
        </h:head>

        <h:body>
            <p:growl id="growl" showDetail="true" sticky="true" autoUpdate="true" />  

            <h:form>
                <p:remoteCommand name="loadForm" action="#{sampleMBean.createRadio}"
                                 update=":mainForm" global="false" process="@this" />
            </h:form>

            <h:form id="mainForm" binding="#{sampleMBean.form}" />

            <script type="text/javascript">
                jQuery(document).ready(loadForm());
            </script>
        </h:body>
    </f:view>
</html>

JSF Ajax Implementation for dynamic components :SelectOneRadio

2 Answers