Warn user of unsaved data in JSF

Question

I want to warn user of any unsaved data in a form before he/she clicks on a link to navigate away from the current page, without saving. What would be a better approach to achieve this in JSF, so that this check is done at one single place for all pages. Any suggestions are appreciated.

BalusC · Answer 1 · 2011-04-21T13:12:40.673

The standard JSF implementation doesn't provide facilities for this out the box. Besides, this is more a client side issue than a server side issue, so you'll really need to grab a client side language for this such as JavaScript. Since writing crossbrowser compatible JavaScript code for this particular functional requirement isn't exactly trivial, you'd like to use a JavaScript library for this which takes this into account, like jQuery.

Here's a complete kickoff example of how you could achieve this with help of jQuery.

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

        // Turn off the unload message whenever a form get submitted properly.
        $('form').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 <head> template (and preferably also refactor that raw <script> code into its own .js file as well which you include by src attribute) and it'll work regardless of the page you have.

If you happen to be using PrimeFaces, eliminate the script that loads jQuery. jQuery is bundled with PrimeFaces and is loaded when when you use PrimeFaces components on a page. See [Adding jQuery to PrimeFaces results in Uncaught TypeErrors](http://stackoverflow.com/questions/16166039/adding-jquery-to-primefaces-results-in-uncaught-typeerror-over-all-place) — Jasper de Vries, Dec 07 '16 at 12:49

score 0 · Answer 2 · answered Jul 07 '18 at 21:07

0

If you are using a JSF template and you want the message on a specific page and not when leaving every page you can do:

1) Set an id to the body element in your template:

    <h:body id="mainBody">
    </h:body>

2) Use such id in the specific window or view where you want the on before leaving message:

    <script>
        document.getElementById("mainBody").onbeforeunload = function (e) {
            return true;
        };
    </script>

answered Jul 07 '18 at 21:07

Cristian Arteaga

450
7
11

Although the original question asks about validation for all forms in a JSF website, the solution that I propose helps when a developer wants a before-leaving warning only for some forms and not for all of them. – Cristian Arteaga Jul 08 '18 at 01:05
But there is nothing related to 'changes' in inputs in ypur answer. – Kukeltje Jul 08 '18 at 11:01

score 0 · Answer 3 · answered Apr 18 '11 at 22:38

What you could do is add an onclick to all of your links. With jQuery you could do the following:

$($('a').click(function(){
    if(unsavedWork){
        return confirm("You have not saved your work, would you like to leave anyway?");
    }else{
        return true;
    }
}););

Warn user of unsaved data in JSF

3 Answers3

Linked