Intercept a4j:commandButton request

Question

I am developing web application using A4J, Richfaces. One of my requirement is, I need to check if the user has changed any values in the form when he is trying navigate away from the page.

I have save and cancel buttons in the page. I am using a4j:command button for cancel functionality. Clicking on cancel button should do below things

1. Check if the user has modified anything in the form (this I am doing by using javascript and have a flag if user changed any values)
2. Display confirmation box (javascript confirm with values "Do you really want to discard the changes -- YES NO") when user changes form values
3. If user says YES, then submit the form using AJAX (by using A4J)

My a4j command button code is like this

<a4j:commandButton action="MyClass.cancel_action"
    onclick="checkIsPageChanged()"/>

The issue here is, while using using a4j:commandButton, I cannot call the intermediate javascript function (the function which checks if user has updated any values and displays confirmation box) and then submit the request using ajax. I have looked at the code generated by JSF and the code is like (not the exact but syntact)

<input type="button"
    onclick="checkIsPageChanged();AJAX.submit('')/>

The thing is when I click on button, it is calling only checkIsPageChanged() and not calling AJAX.submit().

Any workaround for this will help me.

Thank you in advance.

Answer 1

Use a4j:jsFunction and call that from your a4j:commandButton when the checkIsPageChanged() returns true.

eg.

<a4j:commandButton action="MyClass.cancel_action"
    onclick="if(checkIsPageChanged()) { cancel(); }"/>
<a4j:jsFunction name="cancel" action="MyClass.cancel_action"/>

Answer 2

To be more specific we can use:

onclick="if(!isPageChanged()) {return false}"

Returning false will not submit the request.