2 Replies Latest reply on Feb 27, 2010 5:50 PM by rafal.chojnacki

    How to hide RichFaces component on load

    rafal.chojnacki
    rafal.chojnacki Feb 27, 2010 10:53 AM

      Hi All,

       

      I would like to hide selected rendered component (for example: label) on page load. This gives mi opportunity to subsequently show component after user action (for example: when user clicks link).

       

      Here is example:


      <a4j:outputPanel id="myPanel">

      <h:outputText value="Text 1" />

      <h:outputText value="Text 2" />

      </a4j:outputPanel>

      <a4j:commandLink ajaxSingle="true" onclick="#{rich:component('myPanel')}.show()">

      <h:outputText value="Show panel"/>

      </a4j:commandLink>

       

      Panel myPanel should be hidden at the begining (after page load) and should apper when user click link.

       

      Can you give me please advice how to do that?

       

      Thanks,

      Rafal

      • 3194 Views
      • Tags:
        • 1. Re: How to hide RichFaces component on load
          pangbuddy
          pangbuddy Feb 27, 2010 4:50 PM (in response to rafal.chojnacki)

          CSS could help.

          set style to "disply:none"

          1 of 1 people found this helpful
            • Actions
          • 2. Re: How to hide RichFaces component on load
            rafal.chojnacki
            rafal.chojnacki Feb 27, 2010 5:50 PM (in response to pangbuddy)

            Yes, you are right!

             

            Here is complete solution which works fine:

             

            CSS:

             

                .hideOnLoad {
                    display: none;
                }

             

            Page fragment:

             

                <a4j:outputPanel id="myMessage" styleClass="hideOnLoad">
                    <h:outputText value="This is my first message" />
                    <h:outputText value="This is my second message" />
                </a4j:outputPanel>
                <br/>
                <a4j:commandLink ajaxSingle="true"
                    onclick="$('myMessage').removeClassName('hideOnLoad');"
                    value="Show my message" />

             

            Thanks,

            Rafal

              • Actions