JSF h:ajax tag problem. The datagrid doesn't relaod

Question

Hi this is my Code. It does not work for me. But it works in the solution of a friend. I don't know whats the reason. I don't get any error. All seems to be fine. But if i click my radiobutton nothing happens. I'm getting crazy pls help!

<h:form id="form">
            <h:panelGrid id="baseData" columns="2">
                <h:selectOneRadio value="#{billing.paymentType}" id="paymentType">
                    <f:selectItem itemValue="cred" itemLabel="credicard" />
                    <f:selectItem itemValue="bill" itemLabel="bill" />
                    <f:ajax render="credinfo" />
                </h:selectOneRadio>
            </h:panelGrid>
            <h:panelGrid id="credinfo"  columns="2">
                <h:outputText value="bla" rendered="#{billing.paymentType=='cred'}"/>
            </h:panelGrid>
        </h:form>

Now i works.. i don't know why

Answer 1

When you put <f:ajax> inside an UIInput component, the generated DOM event it listens on is by default change. That event is only fired when the input value is changed and loses focus. So, to get it fired in case of radio buttons, you need to click the radio button and then click somewhere else on the page so that it loses focus. This is not a JSF problem, but just the (confusing) nature of HTML/JS.

Usually, to hook on a change of a HTML radiobutton/checkbox immediately, you'd rather like to hook on the click event instead.

<f:ajax event="click" render="credinfo" />

Once again, this isn't a JSF problem. The same "problem" manifests as good on plain HTML/JS.

Interesting detail is by the way that it works exactly the same way on input text fields, but that nobody is complaining that change only get fired on blur (when the element loses focus) :)