4 Replies Latest reply on Feb 7, 2013 8:12 AM by Siva P

    Rich collapsible panel

    tvaana Newbie

      Hi!

       

      I am using richfaces 4.2.0 collapsible panel and after server side saving, I want to collapse the extended panel.

       

      I thought doing it via javascript oncomplete

       

       

      <a4j:commandButton oncomplete="closePanel('panelId');" value="#{uiMessages.save}"

                         

                    action="#{myBean.handleSaving}" render="totalcount">

                   

      </a4j:commandButton>  

       

      How to use javascript api??

       

      Or is this something that can be done with rich toggleControl???

       

       

      T

        • 2. Re: Rich collapsible panel
          Michal Petrov Master

          tvaana wrote:

           

          Hi!

           

          I am using richfaces 4.2.0 collapsible panel and after server side saving, I want to collapse the extended panel.

           

          I thought doing it via javascript oncomplete

           

           

          <a4j:commandButton oncomplete="closePanel('panelId');" value="#{uiMessages.save}"

           

                        action="#{myBean.handleSaving}" render="totalcount">

           

          </a4j:commandButton>  

           

          How to use javascript api??

           

          Or is this something that can be done with rich toggleControl???

           

           

          T

          Hi,

           

          there is no closePanel function, the collapsible panel only provides switchPanel().

           

          As for the API you use it like this:

          <a4j:commandButton oncomplete="#{rich:component('panelId')}.switchPanel()">
          

           

          or with a componentControl (inside the a4j:commandButton):

          <rich:componentControl event="click" operation="switchPanel" target="panelId" />
          

           

          The switchPanel() only switches between open and close. If you cannot be sure if the panel is open you can use this:

           

          <a4j:commandButton oncomplete="if (#{rich:component('panel')}.activeItem == 'true') {#{rich:component('panel')}.switchPanel()}">

           

          but you cannot use this inside componentControl

          • 3. Re: Rich collapsible panel
            tvaana Newbie

            That's just what I was looking for, thanks Michal!

             

            Fortunately I was able to solve it other way, little bit more complicated

             

            1. Checked how richfaces generated the div id

            In my case generated it like: ryhmat:content

             

            2. Called js-function via oncomplete with the id as a parameter and escaped the semicolon:

             

            oncomplete="closePanel('ryhmat\\:content')"

             

            3. Changed the css style from blocked to none

             

            function closePanel(panelId)

            {

                    $('#'+panelId).css('display', 'none');

            }

             

            Thanks Firebug and Michal!

             

             

            T

            • 4. Re: Rich collapsible panel
              Siva P Master

              Hello tvanna,

               

              Using Jquery we can do it.As per my understanding.. IF u click the action button means <rich:simpleTogglePanel should collapse. and again if  u click the panel it should re open in the same screen.

               

              1) Just create a hideTogglePanel as default false.

              2) while clicking the action button make the boolean variable as false(opened="#{bean.hideTogglePanel}").

              3) for actionListener just make boolean variable as true.

               

               

              <script language="javascript" type="text/javascript" src="./script/js/jquery-1.3.2.js"></script> 

              <script language="javascript" type="text/javascript" src="./script/jQueryChart/jquery-1.4.4.min.js"></script>

               

                    <script type="text/javascript">

                        jQuery.noConflict();

                       jQuery(function(){

                          function hideTogglePabelAutoCollapsefn(event) {               

                                jQuery("#docLibraryexpertSearch:j_id77_switch_on").css('display','none');    //This is the rich:collapsable panel id.Normally it plays like ON OFF only.

                                jQuery("#docLibraryexpertSearch:j_id77_switch_off").css('display',' ');   

                                return false;

                          }        

                    });

                      jQuery(function(){

                          function hideTogglePabelExpandfn(event) {                //While expanding after auto hide(clicking action button for backing bean).

                                jQuery("#docLibraryexpertSearch:j_id77_switch_on").css('display','');   

                                jQuery("#docLibraryexpertSearch:j_id77_switch_off").css('display','none');

                                $("#docLibraryexpertSearch:hidentogglePanelID").val("true");   

                                return false;

                          }             

                    });         

                        </script>        

                 

                  <h:form id="docLibraryexpertSearch" styleClass="edit">

                  <h:inputHidden id="hidentogglePanelID" value="#{docLibraryHome.hideTogglePanel}"/> // This is used to hold the hidden value for hide and show the toggle panel or collapsable panel

                      <a:region id="expertRegion" renderRegionOnly="true">

                      <rich:simpleTogglePanel id="tpanelId" label="Document Search Filter" switchType="ajax" opened="#{bean.hideTogglePanel}"

                           actionListener="#{docLibraryHome.togglePanelListener}" onexpand="hideTogglePabelExpandfn();" oncollapse="alert('collapse')"> // In back bean use the listner for boolean variable

                           // hideTogglePanel as false. see two java script functions to open and close the collapsable panel.

                         

                      ************************ your code *****************************

                            

                       </rich:simpleTogglePanel>

                         

                      <div class="actionButtons">

                      <rich:toolBar>          

                           <a:commandButton id="search" value="Search123" action="#{bean.searchByDocument}" reRender="tpanelId,expertRegion"

                            status="statusID" eventsQueue="ajaxQueue" oncomplete="hideTogglePabelAutoCollapsefn();" /> //Here on complete we are collapsing the panel.   

                       </rich:toolBar>  

                      </div>

               

              Bean :

              public void togglePanelListener()

                  {

                      hideTogglePanel = true;

                      System.out.println("Comming.....");

                  }

               

              I hope this works fine.

               

              Thanks,

              Siva

              1 of 1 people found this helpful