Invoke button action (ActionEvent) and value change listener using JavaScript- Oracle ADF

Sharing is Caring

This is another post about using JavaScript in ADF Faces, So again nothing complicated just simple things but needed often
In this post I am covering two simple requirements, using JDeveloper 11.1.2.4 (11g Release2)

1. How to call button action (ActionEvent) using JavaScript
2. How to call valueChangeListener of a component using JavaScript

Call button action using JavaScript-

So for this just drop a commandButton and an inputText on the page and create an ActionListener in managed bean for the button

The code in managed bean for ActionEvent-

    /**Action Listener for Button
     * @param actionEvent
     */
    public void buttonAction(ActionEvent actionEvent) {
        FacesMessage msg = new FacesMessage("Button Action called");
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, msg);
    }

Now the requirement is to call this button action on double click event of the mouse in inputText
To handle ActionEvent in JavaScript, the framework provides a class AdfActionEvent , it has a method to queue ActionEvent from a component. So here I use the same method to call ActionEvent

See JavaScript function-

function callButtonAction() {
                  //Method to get component using id (here button is top container)
                  var button = AdfPage.PAGE.findComponentByAbsoluteId('cb1');
                  //Method to queue ActionEvent from component
                  AdfActionEvent.queue(button, button.getPartialSubmit());
              }

and call it using af:clientListener under af:inputText-

 

Run the page and check on double click of the mouse in inputText-

Invoke button action

 

Call ValueChangeListener using JavaScript-

This is also same as previous one, created a valueChangeListener in managed bean for input text and requirement is to call this listener on mouse hover of button

The code in managed bean for ValueChangeListener-

    /**ValueChangeListener for inputText
     * @param valueChangeEvent
     */
    public void inputTextVCE(ValueChangeEvent valueChangeEvent) {
        FacesMessage msg = new FacesMessage("Value Change Lestener called");
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, msg);
    }

There is a class to handle valueChange event using JavaScript – AdfValueChangeEvent
So this class also has a queue method, the difference is this queue method takes 4 parameters and also requires a value change event on the component
So first step is to change (set) value of the field using JavaScript and then queue valueChangeEvent

See JavaScript function-

 function callValueChangeEvent(evt) {
                  //Method to get component using id (here inputText is top container)
                  var field = AdfPage.PAGE.findComponentByAbsoluteId('it1');
                  //Change(set) field's value
                  field.setValue('I am JavaScript text');
                  //Get New changed value
                  var newVal = field.getValue();
                  //Queue ValueChangeEvent (component,oldValue,newValue,autoSubmit)
                  AdfValueChangeEvent.queue(field, null, newVal, false);

}

make sure that clientComponent and autoSubmit property of inputText set to true
call this javascript function from the button using af:clientListener

 

Run the page and check it-

Cheers 🙂 Happy Learning

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

1 thought on “Invoke button action (ActionEvent) and value change listener using JavaScript- Oracle ADF”

Leave a Reply

Your email address will not be published. Required fields are marked *