How to warn user about unsaved changes?

asked 2014-09-08 22:13:23 +0800

sgoli gravatar image sgoli

updated 2014-09-10 18:08:24 +0800

I have an index.zhtml (with navigation header at the top) page which acts as a base container for the reamainaing pages in the project to load.

Lets say I have several zhtml pages. Suppose in page1.zhtml, I have a grid which allows for inline edits in one of the columns. There is a save changes button at the bottom of page1.zhtml. Once the user makes inline edits and click save changes button, the changes are persisted at the server side.

My question here is: If the user makes inline edit changes and forgot to save the changes and trying to navigate to a different page, I have to warn the user about the unsaved changes and user can either save or discard those changes. How would I know whether the user is navigating out of current page. Is there a way that SelectorComposer recognizes about navigating out of its layout page?

@Darksu, Thanks for the response, I am providing the inline edit feedback to user about unsaved changes. There are multiple ways of navigating out of this page, from navigation bar/links. I just need to know programmatically when we are navigating out of the current page/composer.

delete flag offensive retag edit


Thanks for all the responses. Most of the responses are regarding detecting bean property changes. To keep it simple, I just want to prevent user from navigating from page1 to any other page, if the page1 has unsaved changes (through inline edits).

sgoli ( 2014-09-11 18:18:29 +0800 )edit

You can try use javascript beforeUnload event to avoid navigation.

vincentjian ( 2014-09-12 07:48:04 +0800 )edit

4 Answers

Sort by ยป oldest newest most voted

answered 2014-09-09 09:07:06 +0800

Darksu gravatar image Darksu
1991 1 4

Hello sgoli,

A good practice in order to solve your problem would be the following:

  1. Logically you are using a domain model for all the elements of the form. Thus you will keep a domain model for the initial version (will keep all the values from the components)

  2. Create a domain model for the new version (will store all the changes of the components)

  3. Add some additional logic to the buttons that are used for the redirection in order to compare the old version with the new version of the domain model

  4. If there are differences, then prompt a messagebox to the user in order to save the changes.

*Because you may have to implement a lot of code, a simpler solution would be to add some logic to events (i.e. button on click event, or a key press event for the inline edit). And when an action is made, then update the value of a flag)

Hope my solution will help.

Best Regards,


link publish delete flag offensive edit
link publish delete flag offensive edit

answered 2014-09-11 10:13:36 +0800

gganassin gravatar image gganassin flag of Luxembourg
540 6

This was an important topic for us in the past and we decided to go for a general purpose reusable solution with 2 different implementations one AOP based and the other EMF based (when using EMF generated model).

The interface looked like this:

public interface EditBean {

 * Create the proxy and inizialize the transaction
 * @param target
 *            orginal bean
 * @return the bean proxed
<T> T init(T target);

 * Do a rollback to the status before the init call
void rollback(Object proxy);

 * Remove an object from the transaction management
 * @param proxy the proxy object
void remove(Object proxy);

 * Determine if the object has difference to the initial version
 * @param proxy the proxy object
 * @return true if there are difference otherwise false
boolean isChanged(Object proxy);

 * Retrieve the original object from a proxy. It works also if the proxy is a child of the master proxy<br/>
 * If the proxy object is not a proxy, it returns the argument.
 * @return the original object
<T> T unwrapProxy(T proxy);


link publish delete flag offensive edit

answered 2014-09-13 18:44:08 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16

There are a lot of javascript libs that can help you to detect the browsers page switching as a first step.


. . .
<?script type="text/javascript" src="/js/visibility.js"></script?>

. . .

<!--    http://alxgbsn.co.uk/2013/04/04/visibility-js-a-cross-browser-plugin-for-using-the-page-visibility-api/  -->

<script type="text/javascript">
   var page = new Visibility({ onHidden: hiddenCallback, onVisible: visibleCallback });

   function hiddenCallback () { 
      console.log('hidden callback'); 
      /*alert('Really change the browser tab?');*/ 

   function visibleCallback () {
      console.log('visible callback'); 


best Stephan

link publish delete flag offensive edit


Indeed... just to explain my previous answer: for me the difficult part is not the HOW (which is the original question's scope) but the WHEN: when should i trigger the warning of a potential loss of data... without having to attach one zillion Listeners to the UIs?

gganassin ( 2014-09-17 17:31:35 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2014-09-08 22:13:23 +0800

Seen: 26 times

Last updated: Sep 13 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More