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 ponent.

The source code is as follows:

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

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

<af:showDetailItem id="pane3" text="Panel Label 3">
    <af:mandButton text="mandButton 3" id="cb3">
        <af:clientListener method="showNext" type="action" />
    </af:mandButton>
</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...

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 ponent.

The source code is as follows:

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

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

<af:showDetailItem id="pane3" text="Panel Label 3">
    <af:mandButton text="mandButton 3" id="cb3">
        <af:clientListener method="showNext" type="action" />
    </af:mandButton>
</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...

• javascript
• jsf
• oracle-adf

Share Improve this question Follow edited Aug 11, 2015 at 10:41 asprin asked Aug 7, 2015 at 11:06 asprinasprin 9,8331212 gold badges7070 silver badges125125 bronze badges 5

• How to write JavaScript depends on the HTML DOM tree (you probably already know, JS runs in webbrowser, not in webserver). Very few people use Oracle ADF and yet more few would try on themselves or tell from top of head how the generated HTML output of the aboveposted XHTML look like. Other people are not interested in installing Oracle ADF just to figure out the actual generated HTML output. In other words, you've more chance in an answer if you include the generated HTML output, or pletely reframe the question to include HTML in a real MCVE flavor and retarget at [html] users. – BalusC Commented Aug 11, 2015 at 6:39
• @BalusC Fair enough. But I assume using javascript on the generated HTML wouldn't be the best practice to follow (even though it would do the job) since ADF has its own remended way of handling client side interactions. Using javascript on the generated HTML is an option and it is something which I can do it myself, but I wan't to follow the approach given in the ADF documentation; i.e., via the use of clientListener tag. – asprin Commented Aug 11, 2015 at 6:51
• 1 Not sure if this is the answer as I know nothing about ADF let alone its generated HTML output, but this may be a helpful hint in the right direction: If the HTML DOM element in question has an onclick attribute, then you could trigger it via just element.onclick(). Or, if you want to simulate a mouse click on the HTML DOM element, then just do element.click(), which would fire its onclick, if any, and then bubble up in the DOM tree depending on its return value. – BalusC Commented Aug 11, 2015 at 11:02
• Unfortunately, I haven't been able to get the answer I was seeking. All the answers below point in the right direction, but I was looking for only a client side solution, i.e; without the use of a bean.... – asprin Commented Aug 18, 2015 at 6:44
• A client side solution requires knowledge of the client side model and view. I.e. the generated HTML output in MVCE flavor, as indicated by my first ment. Too bad you didn't see/understand it sooner. – BalusC Commented Aug 18, 2015 at 7:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +25

<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 .

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

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

You can cycle through the children of the accordion ponent to find out which showDetailItem is disclosed currently. Then set that one to disclosed=false and set true for the next one.