Rich collapsible panel

[tvaana]

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

[rodmarcm]

Hello,

How to use javascript api??

Check:

https://community.jboss.org/thread/161846

Also this may be helpful:

http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/a4j_jsFunction.html

http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_jQuery.html

Regards

[michpetrov]

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

[tvaana]

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

[sivaprasad9394]

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