Detect unsaved data in datatable and prompt with confirm message on navigation

Question

I am using primefaces datatable . If i do any changes in table and not saved the changes and if i try to navigate away from the screen we need to display warning message.

score 1 · Answer 1 · answered Apr 09 '14 at 09:40

1

Good idea by @Daniel, but I didn't like the expensive bind he has set on every input change. and what if your table had a drop down menu, or checkbox, or... ? you would have to bind a change event on them too.

Bind an onchange event on your datatable only, via widgetVar attribute. set a widgetVar to your table for example myTableVar. Then use this:

<script>
var dirtyFlag = false;

$(window).bind("beforeunload", function(event) {
    if(dirtyFlag === true) 
        return "You have unsaved changes";
});
myTableVar.tbody.context.onchange = function() {dirtyFlag = true;}
</script>

answered Apr 09 '14 at 09:40

Qussay Najjar

561
3
7

For a small code improve its more acceptable to add a comment to the original answer instead copy paste it in a new answer. – Daniel Apr 09 '14 at 17:42
@Daniel apologies, no answer stealing is meant :) just wanted a more space to explain exactly what changed and why. Also noted for the next times, thanks – Qussay Najjar Apr 09 '14 at 17:49

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Here is a quick an dirty solution, just drop it into your js file (you can test it online on Primefaces Datatable Showcase in the browser console)

var dirtyFlag = false;

$(window).bind("beforeunload",function(event) {
    if(dirtyFlag === true) return "You have unsaved changes";
});

$(document).on('change','input', function(){dirtyFlag = true});

And don't forget to set your dirtyFlag to false after clicking on your save button

Regarding the selector for the change event: you can fine tune it to include other inputs under a certain form etc'

Detect unsaved data in datatable and prompt with confirm message on navigation

2 Answers2