Detecting client-side changes to UI components in PrimeFaces on page exit?

Question

I'd like to implement warning message when leaving the page, that the unsaved changes will be lost. However, to do that correctly, I need to know if the PrimeFaces components were changed on the client side.

Is there an existing mechanism that I can use? I've thought about registering keydown listener on all inputs and textareas, but the content of that fields can be changed also by mouse events. On the other hand, onblur won't be fired if the focus is inside field and then the page is closed, so such change won't be detected. I've tested also, that registering onchange on some components (like selectOneMenu, autoComplete) is not working when the change is made with mouse.

Answer 1

There is no complete existing mechanism.

But you can either a ValueChangeListener that gets called on value change or use a javascript function with the onChange attribute inside your element.

I've tested also, that registering onchange on some components (like selectOneMenu, autoComplete) is not working when the change is made with mouse.

This depends on the browser you are using. To make sure everything is working I would test onClick and check if the value inside the element has actually changed.