8 Replies Latest reply on Oct 9, 2007 6:51 AM by j-pro

    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.

        • 1. Re: h selectOneRadio+a4j support - reRender onChange possibl

          What does it mean reRender=":registerNewWorker_form" ?

          I do not see such component in your snippet

          • 2. Re: h selectOneRadio+a4j support - reRender onChange possibl
            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.

            • 3. Re: h selectOneRadio+a4j support - reRender onChange possibl

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

              • 4. Re: h selectOneRadio+a4j support - reRender onChange possibl
                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...

                • 5. Re: h selectOneRadio+a4j support - reRender onChange possibl

                  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"

                  • 6. Re: h selectOneRadio+a4j support - reRender onChange possibl
                    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.

                    • 7. Re: h selectOneRadio+a4j support - reRender onChange possibl

                      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.

                      • 8. Re: h selectOneRadio+a4j support - reRender onChange possibl
                        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)