h selectOneRadio+a4j support - reRender onChange possible?

[j-pro]

Is this possible? As you see, I need to display different input fields depending on radio selection. If this solution is possible - then it doesn't work to me... why? If it isn't possible, then please advise me on possible solutions... I see only this one or simple JScript onChange + page refresh. Is there something better?

<h:form id="registerNewWorker">

...

 <h:panelGroup>
 <h:selectOneRadio id="salaryType_radio" value="#{amBean.employee.isSalaryMonth}">
 <f:selectItem itemLabel="Monthly" itemValue="1"/>
 <f:selectItem itemLabel="Hourly" itemValue="0"/>
 <a4j:support event="onChange" reRender=":registerNewWorker_form"/>
 </h:selectOneRadio>
 </h:panelGroup>

 <c:if test="#{amBean.employee.isSalaryMonth==1}">
 <h:panelGroup>
 <font color="red">*</font>
 <h:outputText value="Salary per month" />
 </h:panelGroup>

 <h:panelGroup>
 <h:inputText id="salPerMonthEdit" required="true" value="#{amBean.employee.salaryMonth}" />
 <rich:message style="color: red" for="salPerMonthEdit"/>
 </h:panelGroup>
 </c:if>

 <c:if test="#{amBean.employee.isSalaryMonth==0}">
 <h:panelGroup>
 <font color="red">*</font>
 <h:outputText value="Salary per hour" />
 </h:panelGroup>

 <h:panelGroup>
 <h:inputText id="salPerHourEdit" required="true" value="#{amBean.employee.salaryHour}" />
 <rich:message style="color: red" for="salPerHourEdit"/>
 </h:panelGroup>
 </c:if>

...

</h:form>

Thanks in advance.

[sergeysmirnov]

What does it mean reRender=":registerNewWorker_form" ?

I do not see such component in your snippet

[j-pro]

Sorry, it was partially copy-paste. <h:form> i wrote by myself... The ID of h:form is "registerNewWorker_form".

Sorry again, just mistaken.

[sergeysmirnov]

why you want to reload the whole form instead of changing what is really might to be changed?

[j-pro]

"SergeySmirnov" wrote:
... what is really might to be changed?

Seems logically to change only c:if blocks for sure. But maybe I'm just have not enough experience with JSF and RF to find an alternative to reload whole form... Maybe I could surround JSTL(c:if) blocks with and reRender only this div, but I have some doubts about it, because I can't make working even reloading of the whole form by now...

[sergeysmirnov]

1. Surround selectOneRadio with a4j:region

2. Surround each c:if with <a4j:outputPanel id="<own_id_here>"

3. point with reRender to those ids

4. I am not sure event="onChange" is good for radio group. I suggest "onclick"

[j-pro]

Thanks for the suggestion, Sergey. Did everything as you advised - no result. I click(change) radio buttons and there is no changes on the page. And, if it's important, FireBug doesn't show any ajax requests...

Here is my changed snippet:

<h:form id="registerNewWorker_form">
 <c:if test="#{pretendersSDTableMan.isNewWorker}">
 <TABLE border="0" width="100%" style="padding-top:10px;background-color: #B5CEFD" cellspacing="0" cellpadding="0">
 <TR>
 <TD>

...

 <h:panelGroup>
 <a4j:region id="radioSalaryRegion">
 <h:selectOneRadio id="salaryType_radio" value="#{amBean.employee.isSalaryMonth}">
 <f:selectItem itemLabel="Monthly" itemValue="1"/>
 <f:selectItem itemLabel="Hourly" itemValue="0"/>
 <a4j:support event="onClick" reRender="salaryMonth_field,salaryHour_field"/>
 </h:selectOneRadio>
 </a4j:region>
 </h:panelGroup>

 <a4j:outputPanel id="salaryMonth_field">
 <c:if test="#{amBean.employee.isSalaryMonth==1}">
 <h:panelGroup>
 <font color="red">*</font>
 <h:outputText value="Salary per month" />
 </h:panelGroup>

 <h:panelGroup>
 <h:inputText id="salPerMonthEdit" required="true" value="#{amBean.employee.salaryMonth}" />
 <rich:message style="color: red" for="salPerMonthEdit"/>
 </h:panelGroup>
 </c:if>
 </a4j:outputPanel>

 <a4j:outputPanel id="salaryHour_field">
 <c:if test="#{amBean.employee.isSalaryMonth==0}">
 <h:panelGroup>
 <font color="red">*</font>
 <h:outputText value="Salary per hour" />
 </h:panelGroup>

 <h:panelGroup>
 <h:inputText id="salPerHourEdit" required="true" value="#{amBean.employee.salaryHour}" />
 <rich:message style="color: red" for="salPerHourEdit"/>
 </h:panelGroup>
 </c:if>
 </a4j:outputPanel>

...

 </TD>
 </TR>
 </TABLE>
 <h:commandButton value="Hire" action="#{amBean.action4EmployeeAddNewWorker}"></h:commandButton>
 </c:if>
 </h:form>

P.S.: ID's of a4j:outputPanels were tried as global (with ':'), as without it.

[sergeysmirnov]

Could you explain rationally why you use "onClick" instead of "onclick" ?

If you are not sure about ":" in the particular case, do not use it there at least until the short version works perfect.

[j-pro]

Because in plain javascript it was always used as "onClick", "onSelect", etc. It always worked. Besides, almost every JScript tutorial writes about event handlers as "onClick", etc. For example:http://www.devguru.com/technologies/ecmascript/QuickRef/radio.html
Besides, i use it with rich:dataTable as:

<a4j:support event="onRowClick" onSubmit="this.style.backgroundColor='#000000" actionListener="#{anketaDTableMan.dtRowSelected}"/>

and it works perfetcly.


That's why...



But with selectOneRadio, you're right, "onclick" works perfectly. Thanks for your help, Sergey.

Does it mean that I should correct onRowClick to onrowclick on a4j:support of rich:dataTable too? (it works perfect now)