How to detect unsaved data in form when user leaves the page?

by

This is normally implemented in the client side with help of JavaScript, because it’s not nicely possible to intercept on beforeunload event from the server side on when the enduser leaves the page.

Here’s a concrete example with help of the JavaScript library jQuery (otherwise you would end up with 10 times as much code to make it properly crossbrowser compatible and work seamlessly together with ajax re-renders):

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(function() {
        // Set the unload message whenever any input element get changed.
        $(':input').on('change', function() {
            setConfirmUnload(true);
        });

        // Turn off the unload message whenever a form get submitted properly.
        $('form').on('submit', function() {
            setConfirmUnload(false);
        });
    });

    function setConfirmUnload(on) {
        var message = "You have unsaved data. Are you sure to leave the page?";
        window.onbeforeunload = (on) ? function() { return message; } : null;
    }
</script>

Just paste this in your <h:head> template or just put it in some script.js file which you include by <h:outputScript>.

More Related Contents:

  1. Identifying and solving javax.el.PropertyNotFoundException: Target Unreachable
  2. Differences between action and actionListener
  3. How to use PrimeFaces p:fileUpload? Listener method is never invoked or UploadedFile is null / throws an error / not usable
  4. How can server push asynchronous changes to a HTML page created by JSF?
  5. Is it safe to manually start a new thread in Java EE?
  6. Best way to add a “nothing selected” option to a selectOneMenu in JSF
  7. Real time updates from database using JSF/Java EE
  8. Binding attribute causes duplicate component ID found in the view
  9. p:commandbutton action doesn’t work inside p:dialog
  10. How to implement JAX-RS RESTful service in JSF framework
  11. Outcommented Facelets code still invokes EL expressions like #{bean.action()} and causes javax.el.PropertyNotFoundException on #{bean.action}
  12. Execution order of events when pressing PrimeFaces p:commandButton
  13. How to load and display dependent h:selectOneMenu on change of a h:selectOneMenu
  14. How to set converter properties for each row/item of h:dataTable/ui:repeat?
  15. @ViewScoped bean recreated on every postback request when using JSF 2.2
  16. Pure Java/JSF implementation for double submit prevention
  17. Redirect to external URL in JSF
  18. How can I check what version of EL is server using
  19. Split java.util.Date over two h:inputText fields representing hour and minute with f:convertDateTime
  20. How to write a custom converter for
  21. JSF managed bean naming conventions
  22. instanceof check in EL expression language
  23. Adding faces message to redirected page using ExternalContext.redirect()
  24. What exactly is #{component} in EL?
  25. Format Date output in JSF
  26. Reset input fields without executing validation
  27. Set decimal separator when using f:convertNumber
  28. Primefaces valueChangeListener or
  29. h:commandButton not working inside h:dataTable
  30. How to monitor asynchronous/background thread status and get notifications in a JSF component

Leave a Comment