Alert when leaving page with unsaved form(typescript)

Question

I have ts script with code to handle "unsaved" text inputs

Here is code of script

export class Unsave {
    public static unsave_check(): void {
        let unsaved = false;
        $(":input").change(function(){ 
            unsaved = true;
            console.log(unsaved);
        });

    function unloadPage(){ 
        if(unsaved){
            return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
        }
    }

    }
}

And then I use it in other script like this

`window.onbeforeunload = Unsave.unsave_check();`

But as I see, function unloadPage() is never hit, why so? I see that unsaved is changing value to true. But when I go back, I get no alert message.

How I can fix this issue?

thank's for help

Possible duplicate of [Confirmation before closing of tab/browser](https://stackoverflow.com/questions/10311341/confirmation-before-closing-of-tab-browser) — ADreNaLiNe-DJ, Jun 25 '18 at 11:46
what does `$(":input")` represent ?. Is it a text field or a checkbox or a button? — Carsten Løvbo Andersen, Jun 25 '18 at 11:46
And this part of code is working well @CarstenLøvboAndersen — John Doe, Jun 25 '18 at 11:48

Lajos Gallay · Accepted Answer · 2018-06-25T11:58:48.667

1

I think you should call Unsave.unsave_check() when the form has been initialized and bind the unloadPage on the window.onbeforeunload (and you can make it also static - or the other method to non-static and instantiate the object). You should also move the value unsaved from the function scope, maybe to a private class field so both methods can access it

export class Unsave {
    private unsaved: boolean = false;

    public register() {
        $(":input").change(() => {
            this.unsaved = true;
            console.log(this.unsaved);
        });
    }

    public unloadPage() {
        if (this.unsaved) {
            return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
        }
    }
}

// call this after form init
const unsaveChecker = new Unsave();
unsaveChecker.register()
window.onbeforeunload = () => unsaveChecker.unloadPage()

edited Jun 25 '18 at 11:58

answered Jun 25 '18 at 11:53

Lajos Gallay

1,169
7
16

I think it's not work. Same as answer above. for some reasons it changing value in `register()` method , but not calling unloadPage. – John Doe Jun 25 '18 at 12:09
Thank's dude so much! – John Doe Jun 25 '18 at 12:15
Can I refactor it, to just call `Unsave.***` , and this is all? – John Doe Jun 26 '18 at 09:32
yes, just make the methods static and you can call Unsave.***. – Lajos Gallay Jun 27 '18 at 08:26

ben · Answer 2 · 2018-06-25T11:59:05.533

0

You should call unloadPage in window.onbeforeunload with something like this :

export class Unsave {
    private static unsaved: boolean = false;
    public static unsave_check(): void {
        Unsave.unsaved = false;
        $(":input").change(function(){ 
            Unsave.unsaved = true;
            console.log(Unsave.unsaved);
        });
    }
    public static unloadPage(): string { 
        if(Unsave.unsaved){
            return "You have unsaved changes on this page. Do you want to     leave this page and discard your changes or stay on this page?";
        }
    }

}

Then window.onbeforeunload = Unsave.unloadPage(); and somewhere else in your code you have to call unsave_check...
For instance:

document.addEventListener("DOMContentLoaded", function() {
    Unsave.unsave_check();
});

Note: unloadPage and unsave_check are not consistent naming... one camel case, one snake case ?

edited Jun 25 '18 at 11:59

answered Jun 25 '18 at 11:54

ben

3,558
1
15
28

Yeah, but I think you miss `}` bracket after unsav_check() and also now I get this error `Type '"You have unsaved changes on this page. Do you want to leave this page and discard your changes o...' is not assignable to type 'void'.` – John Doe Jun 25 '18 at 11:58
So maybe second function must be `:string` – John Doe Jun 25 '18 at 11:58
@JohnDoe true, changed – ben Jun 25 '18 at 12:00
Seems not works. When I go to previous page I don't get alert – John Doe Jun 25 '18 at 12:05
I calling unloadPage like this `window.onbeforeunload = Unsave.unloadPage();` unsave_check() working well and changing value – John Doe Jun 25 '18 at 12:06

Alert when leaving page with unsaved form(typescript)

2 Answers2