Trigger/Simulate Click Event Programmatically via ClientListerner

Question

I've managed to get the click event of the button working so far by following the documentation. What I'm struggling now with is to programmatically trigger the click event of ADF component.

The source code is as follows:

<af:showDetailItem id="pane1" text="Panel Label 1" disclosed="true">
    <af:commandButton text="commandButton 1" id="cb1">
        <af:clientListener method="showNext" type="action" />
    </af:commandButton>
</af:showDetailItem>

<af:showDetailItem id="pane2" text="Panel Label 2">
    <af:commandButton text="commandButton 2" id="cb2">
        <af:clientListener method="showNext" type="action" />
    </af:commandButton>
</af:showDetailItem>

<af:showDetailItem id="pane3" text="Panel Label 3">
    <af:commandButton text="commandButton 3" id="cb3">
        <af:clientListener method="showNext" type="action" />
    </af:commandButton>
</af:showDetailItem>

Javascript

function showNext(evt){        
   var src = evt.getSource();
   var showDetailItemNode = src.getParent(); // targets the showDetailItem tag     
   /* how do I trigger the click event of this node */
}

So basically what I'm trying to achieve is that when button #cb1 is clicked, I want to simulate the click event of showDetailItem #pane1 and so on...

Answer 1

<af:serverListner> 

is a tag that you can use in tandem with <af:clientListner>to propagate your event to your managed bean .More over , you can also associate above mentioned tags with <af:showDetailItem> as well . Hope it helps .

Answer 2

If you want to manipulate the accordion completely using JavaScript on the client you'll need to leverage the JavaScript API for ADF Faces. Specifically these two: http://docs.oracle.com/cd/E23943_01/apirefs.1111/e12046/oracle/adf/view/js/component/rich/layout/AdfRichShowDetailItem.html and

http://docs.oracle.com/cd/E23943_01/apirefs.1111/e12046/oracle/adf/view/js/component/rich/layout/AdfRichPanelAccordion.html