Menu
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...
670
You could use the ref prop to acquire a reference to the underlying HTMLInputElement object through a callback, store the reference as a class property, then use that reference to later trigger a click from your event handlers using the HTMLElement.
To add the click event in React using plain JavaScript, you need to use addEventListener() to assign the click event to an element. Create one <button> element as ref props so that it can be accessed to trigger the click event.
If you want to trigger click event without clicking a button manually, then you should use the click() method in Javascript. Example : click button on page load dynamically. For that we will create a button with an id my-btn . So that, we can select the button using the getElementById() method.
<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 .
126
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
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
