accordion data dynamically from the backing bean

[ramathulasi kudumula，修改在9 年前。]

I am now trying to implement the liferay faces alloy components in our application. But I am having problems in implementing alloy:accordion.

I want to fetch the accordion data dynamically from the backing bean. When any accordion is expanded, a method in the backing bean has to be called and the values inside the accordion must be dynamically populated.

Below is the xhtml code for accordion:

XHTML
=====
<alloy:accordion styleClass="accordion-example-2" value="#{formBackingBean.accordionValues}" var="accord" tabExpandListener="#{formBackingBean.accordClick}" >
<alloy:tab contentClass="content-compatible" headerClass="header-compatible" headerText="#{accord}" >
<span>#{accord}</span>
</alloy:tab>
</alloy:accordion>


Backing Bean
==========

public void accordClick(TabExpandEvent event)
{
System.out.println("Inside Accord Click");
}

When the accordion is clicked, the tabExpandListener is not executed.


Regards,
Thulasi

[Kyle Joseph Stiemann，修改在9 年前。]

Hi Ramathulasi,

Are you sure that your accordClick method is not being executed? It seems like your tabExpandListener may have executed on the server, but the client was never updated. If the client needs to be updated when a tab has been expanded, then an <f:ajax> tag with event="tabExpand" must be specified. So you should add <f:ajax event="tabExpand" render="accordionId" /> as a child of your <alloy:accordion> (and you will need to add id="accordionId" to your <alloy:accordion>). In fact, for your use case, it seems like it might be unnecessary to have a tabExpandListener at all. You may be able to add ajax and remove your tabExpandListener to get the desired behavior.

You can check out the the alloy:accordion Server Events example in the Liferay Showcase for a working example of this.

- Kyle

[ramathulasi kudumula，修改在9 年前。]

Thanks Kyle,

But I am getting the 503 Service Temporarily Unavailable when I hit the liferayfaces.org/web/guest/showcase/-/component/alloy/accordion/server-events URL on the browser.

Regards
Thulasi

[Neil Griffin，修改在9 年前。]

The server error has been corrected. Thanks so much for letting us know

[ramathulasi kudumula，修改在9 年前。]

Kyle,

We have tried to replicate the example for Server Events, where tabCollapseListener & tabExpandListener are called on Collapse & Expand of accordion respectively. But the tabExpandListener / tabCollapseListener in the BackingBean is not called. In our application, whenever a tab is expanded, the data from bean has to be fetched and displayed in the expanded accordion.

Also,the componenet <f:ajax event="tabCollapse" render="feedback" />, throws error saying "the component 'feedback' is not available".

Regards
Thulasi

[Kyle Joseph Stiemann，修改在9 年前。]

ramathulasi kudumula:

Also,the componenet <f:ajax event="tabCollapse" render="feedback" />, throws error saying "the component 'feedback' is not available".

feedback does not exist because none of your components have id="feedback". You should not be trying to render feedback, but your <alloy:accordion>. So instead of doing <f:ajax event="tabExpand" render="feedback" /> you should be doing <f:ajax event="tabExpand" render="accordionId" /> (where accordionId is the id of your <alloy:accordion>). You will probably also want to add id="accordionId" to your <alloy:accordion>.

- Kyle