4 Replies Latest reply on Jul 18, 2007 12:17 PM by sergeysmirnov

    dynamically show/hide or enable/disable controls based on va

    tynor

      Seam 1.2.1-GA / facelets
      Richfaces 3.0.1
      Ajax4JSF 1.1.1

      I am struggling to understand how to use richfaces and/or ajax4jsf to implement a togglable set of controls that are dynamically hidden or enabled/disabled based on the value of another control (e.g. when a checkbox is checked, display or enable a corresponding field; else don't).

      I am trying to avoid customized JavaScript, however I've been unable to get the <a:support onclick/rerender> to cause my control to redisplay after clicking a checkbox.

      This would seem to be a very simple "normally done in javascript, but abstracted by RichFaces or Ajax4JSF" sort of functionality. How is it intended to be done?

      Here's what I've tried without success:

       <s:decorate id="thcheckboxDecoration" template="/layout/edit.xhtml">
       <ui:define name="label">Checkbox</ui:define>
       <h:selectBooleanCheckbox id="theCheckbox"
       value="#{myHome.instance.someProperty}" >
       <a:support event="onblur" reRender="hasSsbicInvestmentDecoration"/>
       <a:support event="onclick" reRender="togglableGroup1,togglableGroup2"/>
       </h:selectBooleanCheckbox>
       </s:decorate>
      
      <!-- This one is intended to show/hide itself as the checkbox changes -->
       <h:panelGroup id="togglableGroup1" rendered="#{myHome.instance.someProperty}">
       <s:decorate id="toggleableDecoration1" template="/layout/edit.xhtml">
       <ui:define name="label">Show/Hide</ui:define>
       <h:inputText id="someText1" value="#{clientHome.instance.anotherProperty}">
       <a:support event="onblur" reRender="someText1"/>
       </h:inputText>
       </s:decorate>
       </h:panelGroup>
      
      <!-- This one is intended to enable/disable itself as the checkbox changes -->
       <h:panelGroup id="togglableGroup2"
       <s:decorate id="toggleableDecoration2" template="/layout/edit.xhtml">
       <ui:define name="label">Enable/Disable</ui:define>
       <h:inputText id="someText2" disable=#{!myHome.instance.someProperty}"
       value="#{clientHome.instance.yetAnotherProperty}">
       <a:support event="onblur" reRender="someText2"/>
       </h:inputText>
       </s:decorate>
       </h:panelGroup>
      



        • 1. Re: dynamically show/hide or enable/disable controls based o
          tynor

          Feedback please? Even if just to confirm that I'm trying to fit a square peg in a round hole by using richfaces/ajax4jsf for this functionality? Does this simple client-side toggling require pure Javascript rather than using these JSF libraries?

          Thanks

          "tynor" wrote:
          Seam 1.2.1-GA / facelets
          Richfaces 3.0.1
          Ajax4JSF 1.1.1

          I am struggling to understand how to use richfaces and/or ajax4jsf to implement a togglable set of controls that are dynamically hidden or enabled/disabled based on the value of another control (e.g. when a checkbox is checked, display or enable a corresponding field; else don't).

          I am trying to avoid customized JavaScript, however I've been unable to get the <a:support onclick/rerender> to cause my control to redisplay after clicking a checkbox.

          This would seem to be a very simple "normally done in javascript, but abstracted by RichFaces or Ajax4JSF" sort of functionality. How is it intended to be done?

          Here's what I've tried without success:

           <s:decorate id="thcheckboxDecoration" template="/layout/edit.xhtml">
           <ui:define name="label">Checkbox</ui:define>
           <h:selectBooleanCheckbox id="theCheckbox"
           value="#{myHome.instance.someProperty}" >
           <a:support event="onblur" reRender="hasSsbicInvestmentDecoration"/>
           <a:support event="onclick" reRender="togglableGroup1,togglableGroup2"/>
           </h:selectBooleanCheckbox>
           </s:decorate>
          
          <!-- This one is intended to show/hide itself as the checkbox changes -->
           <h:panelGroup id="togglableGroup1" rendered="#{myHome.instance.someProperty}">
           <s:decorate id="toggleableDecoration1" template="/layout/edit.xhtml">
           <ui:define name="label">Show/Hide</ui:define>
           <h:inputText id="someText1" value="#{clientHome.instance.anotherProperty}">
           <a:support event="onblur" reRender="someText1"/>
           </h:inputText>
           </s:decorate>
           </h:panelGroup>
          
          <!-- This one is intended to enable/disable itself as the checkbox changes -->
           <h:panelGroup id="togglableGroup2"
           <s:decorate id="toggleableDecoration2" template="/layout/edit.xhtml">
           <ui:define name="label">Enable/Disable</ui:define>
           <h:inputText id="someText2" disable=#{!myHome.instance.someProperty}"
           value="#{clientHome.instance.yetAnotherProperty}">
           <a:support event="onblur" reRender="someText2"/>
           </h:inputText>
           </s:decorate>
           </h:panelGroup>
          



          • 2. Re: dynamically show/hide or enable/disable controls based o

            Golden, brilliant (or what ever) rule - do not point with reRender to the component that has 'rendered' attribute. JSF renders nothing at the moment when rendered=true, so there is no placeholder in the DOM tree to insert a new content when rendered becomes true.

            Second notes and again about 'rendered' - If rendered=false at the beginning of the decode phase, JSF will skip the decoding of the whole component content. I.e. in your example, if #{myHome} has a request scope and #{myHome.instance.someProperty}" equals false at the moment the bean is just created, you will have a big trouble for getting a value from the inner input components.
            This is true for 'disable' attribute, BWT. if #{!myHome.instance.someProperty}" equals false at the beginning of the decode phase, you will not get the value of inputText id="someText2"

            • 3. Re: dynamically show/hide or enable/disable controls based o
              tynor

              Thanks Sergey.

              From this, I conclude that I should not try to use ajax4jsf or richfaces to dynamically toggle the disabled or display attributes of other fields -- I should just write a javascript onclick handler that twiddles the style and disabled attributes of those fields.

              (correct me if I've misinterpreted you!)

              • 4. Re: dynamically show/hide or enable/disable controls based o

                "The shortest way is a way you know well".