# How to warn user about unsaved changes?

sgoli
0

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 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).

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

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

Sort by » oldest newest most voted

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,

Darksu

chillworld
5322 4 9
https://github.com/chillw...

Clients.conformClose(String message)

Greetz chill.

gganassin
540 6
http://www.hybris.com/

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);


}

9393 3 7 16
http://www.oxitec.de/

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

zul:

. . .
<?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');
}

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

</script>


best Stephan

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?

( 2014-09-17 17:31:35 +0800 )edit
[hide preview]