7 Replies Latest reply on Oct 27, 2017 11:40 AM by Moe_ADF_541

Invoke a button 'ActionEvent' using Javascript

Moe_ADF_541 Oct 27, 2017 7:18 AM

Dear Experts,

I want to be able to click an <af:button/> using javascript via a <button> element. For that I have followed this sample:

Invoke button action (ActionEvent) and value change listener using JavaScript- Oracle ADF – Ashish Awasthi's Blog (Jdev/…

However the event does not seem to be launching in any way. I have inserted log messages in order to see what's happening in the browser, and it seems that all the log messages are successfully printed.

<?xml version='1.0' encoding='UTF-8'?>

<!DOCTYPE html>

<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">

<af:document title="Test.jsf" id="d1">

<af:form id="f1">

<af:resource type="javascript">

function callButtonAction() {

console.log(456);

//Method to get component using id (here button is top container)

var button = AdfPage.PAGE.findComponentByAbsoluteId('b1');

console.log(button);

//Method to queue ActionEvent from component

//AdfActionEvent.queue(button, button.getPartialSubmit());

var actionEvent = new AdfActionEvent(button);

actionEvent.forceFullSubmit();

actionEvent.noResponseExpected();

actionEvent.queue();

console.log('wselna111');

}

</af:resource>

<af:panelStretchLayout id="psl1" topHeight="50px">

<f:facet name="start"/>

<f:facet name="end"/>

<f:facet name="top">

<af:panelGroupLayout id="pgl1" layout="horizontal">

<button onclick="callButtonAction()">

activate JS

</button>

<af:button text="button 1" id="b1" actionListener="#{pageFlowScope.TestBean.buttonAction}"

visible="false"/>

</af:panelGroupLayout>

</f:facet>

<f:facet name="bottom"/>

<f:facet name="center"/>

</af:panelStretchLayout>

</af:form>

</af:document>

</f:view>

This is the output on the browser log:

I uploaded a use case at: https://drive.google.com/open?id=0B1puO86WZQKMdXdDSFNUSzNFTDQ

Can someone kindly tell me what's the problem here? or how can I further troubleshoot this? Is the violation displayed an indication of the cause?

Thanks very much in advance.

Best Regards,

JDeveloper 12.2.1.2

1. Re: Invoke a button 'ActionEvent' using Javascript

Timo Hahn Oct 27, 2017 8:26 AM (in response to Moe_ADF_541)

Why don't you simply use a client/serverListener approach?
You add a clientListener ti a normal af:button which class your javascript, do something and from the javascript you call the serverListener. See http://www.oracle.com/technetwork/developer-tools/adf/learnmore/11-client-listener-169135.pdf

Timo
Like Show 0 Likes(0)

Actions
2. Re: Invoke a button 'ActionEvent' using Javascript

managed BEAN Oct 27, 2017 8:37 AM (in response to Moe_ADF_541)

Hello,

Just ran your sample.
Here is the result:

it worked fine...

regards,

Carlos
Like Show 0 Likes(0)

Actions
3. Re: Invoke a button 'ActionEvent' using Javascript

Amaan Junaid Oct 27, 2017 9:18 AM (in response to Moe_ADF_541)

Hi,
As shown above, this should work fine.
In case of any confusion, refer this, https://adfjavacodes.blogspot.in/2013/06/adf-calling-java-code-from-javascript.html

AJ
Like Show 0 Likes(0)

Actions
4. Re: Invoke a button 'ActionEvent' using Javascript

Moe_ADF_541 Oct 27, 2017 9:44 AM (in response to Timo Hahn)

Hello Timo, and thank you for the reply.

Actually I'm quite used to the approach that you mentioned, the client/server listener components. However in this case, I'm using the <button/> basic html component. It's for a lazy reason actually, I am implementing CSS style on the button component that I did not find a way to implement with ADF <af:button/> .

http://www.cssportal.com/blog/create-css-notification-badge/

in which a new property is created inside a selector. I could not find a way to implement this for <af:button/>

Personnaly I prefer to implement this in ADF faces components, if possible.

RBest Regards,
Like Show 0 Likes(0)

Actions
5. Re: Invoke a button 'ActionEvent' using Javascript

Moe_ADF_541 Oct 27, 2017 9:45 AM (in response to managed BEAN)

Hello Carlos, and thank you for the support.

The message is displayed in the log, but is the 'Faces' message displayed onscreen? a popup with "Button Action Called" message should be displayed.

Best Regards,
Like Show 0 Likes(0)

Actions
6. Re: Invoke a button 'ActionEvent' using Javascript

Timo Hahn Oct 27, 2017 11:10 AM (in response to Moe_ADF_541)

And why don't you do it?
I just setup a simple test case:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
    <af:document id="d1"><af:resource type="css">
    .badge {
    background:             radial-gradient( 5px -9px, circle, white 8%, red 26px );
        background:    -moz-radial-gradient( 5px -9px, circle, white 8%, red 26px );
        background:     -ms-radial-gradient( 5px -9px, circle, white 8%, red 26px );
        background:      -o-radial-gradient( 5px -9px, circle, white 8%, red 26px );
        background: -webkit-radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background-color: red;
    border: 2px solid white;
    border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
    box-shadow: 1px 1px 1px black;
    color: white;
    font: bold 15px/13px Helvetica, Verdana, Tahoma;
    height: 16px;
    padding: 4px 3px 0 3px;
    text-align: center;
    min-width: 14px;
    margin: 0px 0px 20px -10px;
    position: relative;
}
</af:resource>
      <af:form id="f1">
        <af:panelStretchLayout topHeight="50px" id="psl1">
          <f:facet name="top"/>
          <f:facet name="center">
            <af:panelGroupLayout layout="scroll" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" id="pgl2">
              <af:panelGroupLayout id="pgl1" layout="horizontal">
                <af:inputText label="Number" id="it1" value="#{viewScope.number}" autoSubmit="true"/>
                <af:commandButton text="commandButton 1" id="cb1" shortDesc="55" partialSubmit="true"/>
                  <af:outputText value="<div class='badge'>#{viewScope.number}</div>" id="ot1" partialTriggers="cb1" escape="false"/>
              </af:panelGroupLayout>
            </af:panelGroupLayout>
            
          </f:facet>
        </af:panelStretchLayout>
      </af:form>
    </af:document>
</f:view>
</jsp:root>
It's not exactly your css (I used css I found ) but it generates the desired output like
and

Timo
Like Show 0 Likes(0)

Actions
7. Re: Invoke a button 'ActionEvent' using Javascript

Moe_ADF_541 Oct 27, 2017 11:40 AM (in response to Timo Hahn)

Hello Timo,

This executes what I want to do exactly! Thank you Timo, I did not even know it can be done like this:

<af:outputText value="<div class='badge'>#{pageFlowScope.SkinTestBean.testCount}</div>"
id="ot1" partialTriggers="cb1" escape="false"/>

Using a <div/> as value of the <af:outputText/>, this is completely new to me , I will be using that in my project.

Again Timo a million thanks

Best Regards,
Like Show 0 Likes(0)

Actions

Go to original post