Update page component in between of event processing in ADF Faces using JavaScript

This post is not about any specific topic of framework, recently i was working in an application, requirement was like this
There is a button on page that uploads a large file to server and it takes some time . So as soon as user press this button it's text should be changed to 'Processing..' and after upload is complete it should be 'Done'




In this post i am sharing same - How to update page component while an event is processing ?
First i have tried it using java means in same button action listener but in this case button text was changed only after event processing is complete
So for this purpose i have used some javascript function, this is quite simple (see the implementation)

• Drop a button on page and create a ActionListener , it will change button text to 'Done' after event processing (used Thread.sleep() for some long processing)



    private RichButton buttonBind;

    /**Method to process Action Event
     * @param actionEvent
     */
    public void processValueAction(ActionEvent actionEvent) {
        // Sleep for some time (Event Processing time)
        try {
            Thread.sleep(10000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //After processing set button text to 'Done'
        buttonBind.setText("Done");
        AdfFacesContext.getCurrentInstance().addPartialTarget(buttonBind);
    }

    public void setButtonBind(RichButton buttonBind) {
        this.buttonBind = buttonBind;
    }

    public RichButton getButtonBind() {
        return buttonBind;
    }



• Now question is how to change button text to 'Processing..' immediately after clicking button. So for this purpose i am using javascript



function changeButtonText(event) {
                  var comp = event.getSource();
                  comp.setText('Processing..');
              }



• Calling this javascript function using af:clientListener in button like this (See XML source of page)



 <af:document title="UpdatePageComponent.jspx" id="d1">
            <af:resource type="javascript">
              function changeButtonText(event) {
                  var comp = event.getSource();
                  comp.setText('Processing..');
              }
            </af:resource>
            <af:form id="f1">
                <af:spacer width="10" height="10" id="s1"/>
                <af:panelGroupLayout id="pgl1" layout="horizontal" halign="center">
                    <af:panelBox id="pb1" showDisclosure="false">
                        <f:facet name="toolbar"/>
                        <af:button text="Click to process" id="b1"
                                   actionListener="#{viewScope.UpdatePageComponent.processValueAction}"
                                   clientComponent="true" binding="#{viewScope.UpdatePageComponent.buttonBind}"
                                   inlineStyle="width:250px;text-align:center;padding:5px;font-weight:bold;">
                            <af:clientListener method="changeButtonText" type="action"/>
                        </af:button>
                    </af:panelBox>
                </af:panelGroupLayout>
            </af:form>
        </af:document>



• As soon as button is clicked this javascript function will be invoked and set new text in button and after event processing button text is again set by managed bean actionListener.




After Clicking button (Event is processing)-



Processing complete-

Thanks, Happy Learning :)