h:selectOneRadio doesn't work with ajax change event

Question

i have two radio buttons and no one is selected by default, and it's mandatory to select one of them, so here's what i did:

   <div id="payment_method">
     <h:message for="sel_payment_method" style="Color:red;"/>
     <h:selectOneRadio id="sel_payment_method" required="true" requiredMessage="Please select a payment method" value="#{myBean.selectedPaymentMethod}">  
       <f:selectItem itemLabel="Debit or Credit Card" itemValue="credit" />  
       <f:selectItem itemLabel="Checking Account" itemValue="checking" />
       <f:ajax event="change" render="credit_inputs_fragment checking_inputs_fragements" />             
     </h:selectOneRadio>
    </div>

the selectedPaymentMethod property is a string and its default value is null

and the credit_inputs_fragment is a ui:fragement that contains a div

ISSUE: when clicking on a radio buttons the two fragments to be changed are not affected.

please advise, thanks.

Answer 1

You're not entirely clear in describing the concrete problem, but I can see at least two potential problems in the code posted so far:

1. The <f:ajax event="change"> is wrong in case of radiobuttons and checkboxes. It should be event="click". Or, better, just remove it altogether. It defaults to the right one already. See also What values can I pass to the event attribute of the f:ajax tag?

2. The component referenced in <f:ajax render> must be a fullworthy JSF UI component and always be rendered to the client side. If the component is by itself never rendered to the HTML, then JavaScript simply can't find it to update its content. You basically need the conditionally rendered components in another component which is always rendered. See also Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

Answer 2

i followed the example code in the following link, and it solved my issue:

JSF: Dynamically change form