4 Replies Latest reply on Nov 12, 2007 5:21 PM by Arbi Sookazian

    How to enable/disable components based on UI events??

    Arbi Sookazian Master

      I need to hide/display a radio button in a dataTable based on the value of another column's radio button in the same row. What's the best way to do this? I have looked at javascript but it will need to happen on body onload event handler depending on the state of the data upon retrieval of the data for the dataTable from DB table.

      I was offered this advice using AJAX4JSF:

      with ajax4jsf, wrap all your hidden componts within <h:panelGroup id="foobar" >. The panel group is alway rendered in the front end with empty stuff. After user clicks yes/no do ajax form submit and set your rendered backing bean attributes, then tell your a4j component to re-render "foobar", the the hidden components will appear after the panel group is re-rendered.

      So how do I do an ajax form submit when user clicks 'no' on radio button, for example?

      Is this something I can achieve using the a4j:support tag? thx.

        • 1. Re: How to enable/disable components based on UI events??
          Dmitry Demyankov Novice

          Yep, you can use a4j:support to fire actions in your backing bean and then reRender necessary panels.

          • 2. Re: How to enable/disable components based on UI events??
            Arbi Sookazian Master

            Ok, so I tried the above ideas and have learned that the javascript functions are not firing for the onclick event handler for the following code. Keep in mind that I am not actually submitting the form in which the h:selectOneRadio is embedded in (just ajaxSingle):

            <h:selectOneRadio id="accountApprovedRB" value="#{myRow[1].icomsAccountApproved}"
             onclick="checkHidingRadioButtons(this, #{myAuditList.getRowIndex()}); processNote(this, #{myAuditList.getRowIndex()}, 'accountApproved'); checkForSubmit(#{myAuditList.getRowIndex()})">
             <a4j:support event="onclick" action="#{noteAction.setRenderRadioButtons(myAuditList.getRowIndex())}" ajaxSingle="true" reRender="depedentRadioButtons"/>
             <f:selectItems value="#{securityAuditAction.securityAuditRadioButtons}" />

            Please advise as I need both the javascript and a4j:support action method to fire. I looked at onfocus, onblur, onselect, etc. but it seems that only onclick is appropriate event for a radio button.

            Also, the dependentRadioButtons refers to the h:panelGroup as below and it was not re-rendering the additional two columns even though the SFSB methods were firing appropriately. BTW, is the h:panelGroup not rendered by default??? When I remove the h:panelGroup tags, the additonal column graphics are rendered...
            <h:panelGroup id="depedentRadioButtons">
             <f:facet name="header">Security Level Approved?</f:facet>
             <h:selectOneRadio id="securityLevelApprovedRB" value="#{myRow[1].securityLevelApproved}"
             onclick="processNote(this, #{myAuditList.getRowIndex()}, 'secLevelApproved');checkForSubmit(#{myAuditList.getRowIndex()})"
             <f:selectItems value="#{securityAuditAction.securityAuditRadioButtons}" />
             <h:graphicImage id="securityLevelGraphic" value="/img/icon_edit.gif"
             onclick="editNote(this, #{myAuditList.getRowIndex()}, 'secLevelApproved');"/>
             <f:facet name="header">Adjustment Limit Approved?</f:facet>
             <h:selectOneRadio id="adjustmentLimitApprovedRB" value="#{myRow[1].adjustmentLimitApproved}"
             onclick="processNote(this, #{myAuditList.getRowIndex()}, 'adjLimitApproved');checkForSubmit(#{myAuditList.getRowIndex()})"
             <f:selectItems value="#{securityAuditAction.securityAuditRadioButtons}" />
             <h:graphicImage id="adjLimitGraphic" value="/img/icon_edit.gif"
             onclick="editNote(this, #{myAuditList.getRowIndex()}, 'adjLimitApproved');"/>

            • 3. Re: How to enable/disable components based on UI events??
              Arbi Sookazian Master

              I solved the javascript problem by moving the js function calls from the onclick event handler of <h:selectOneRadio> to the onsubmit event handler of the a4j:support tag.

              But when I tried using oncomplete instead of onsubmit (which is really what I need, b/c the js functions are referencing the now rendered columns), my rich:modalPanel does not popup. The two add'l columns are still not rendering... I wonder if the modalPanel doesn't work b/c the re-render is failing???

              new code:

              <h:selectOneRadio id="accountApprovedRB" value="#{myRow[1].icomsAccountApproved}">
               <a4j:support event="onclick"
               oncomplete="checkHidingRadioButtons(this, #{myAuditList.getRowIndex()}); processNote(this, #{myAuditList.getRowIndex()}, 'accountApproved'); checkForSubmit(#{myAuditList.getRowIndex()})"
               <f:selectItems value="#{securityAuditAction.securityAuditRadioButtons}" />

              • 4. Re: How to enable/disable components based on UI events??
                Arbi Sookazian Master

                root cause seems to be associated with the fact that the first js function (checkHidingRadioButtons), is having a null object ref but is not reporting on the UI in IE for some reason. This is happening b/c it's referencing the not yet rendered add'l columns.

                If I can get the add'l columns to render successfully, then I think everything would be ok.

                must you submit the form when using a4j:support tag???