Unload Event for NodeJS SPA

Wappler General How To
,
#1

Hi.
I have a simple NodeJS app with a layout and two content pages - home and chat. I have links on the page to switch between the two content pages. Everything works fine.
What I need to do is if the user in chat page, and they decide the redirect away from the page, show them a confirmation prompt. I added below JS code for the same:

window.addEventListener('beforeunload', function (e) {
    if (location.pathname.startsWith('/chat')) {
        e.preventDefault();
        e.returnValue = 'chat might be lost';
    }
});

If I try to close the browser or tab, this works fine.
But if I click the home link, or press browser back or forward, it fails. Event is not invoked, so there is no prompt and the user is redirected.

I have done similar setup on ASP & PHP server model project before, and this event fires correctly on both link clicks or browser navigation button clicks. But on this NodeJS app, doesn’t seem to be working.
Please help.

#2
#3

@patrick Any insights on this?

#4

When you have a SPA page the page is not being unloaded on navigation, it loads the new page using an ajax request, so no beforeunload event is being triggered.

#5

This mechanism is because of NodeJS?
Because in PHP & ASP, I have similar setup, and it works.

So what is the best way to handle this redirection flow?
The requirement is to get a confirmation from the user whenever they navigate away from a content page where they might have unsaved changes.

#6

It would also happen in PHP and ASP when you have a SPA page and navigate between 2 content pages and the new page is loaded using ajax.

There is currently not a way to prevent the navigation, I could try to introduce a new event on the app like beforenavigate that will trigger when an internal route link is clicked. I can then prevent the navigation, this is only works for the internal links, for the other links you will then still need the beforeunload event.

#7

It will not work for Browser’s back/forward buttons either, right?

#8

It will indeed not work for the back/forward buttons. Perhaps then the best solution is not to use the spa/ajax loading, whit normal navigation the beforeunload is always triggered, it is only a problem with spa pages because you are not leaving the page you are currently on and are only loading partial content within the current page.

#9

Damn. Can’t not use SPA. Its such a great UX.
Lets see what the client says. :sweat_smile:
I will recheck the other SPA PHP/ASP projects.

This partial loading mechanism is one of the many ways of doing SPA, that Wappler has chosen?
Or is it same across all frameworks?

Would really appreciate if the internal redirection event could be added in this weeks release. It will be better than nothing.

#10

I will do some more research, but I’m not aware of a way to prevent the back/forward navigation without removing the history. I know it is possible to remove the history to prevent users from using the back button, but that is also bad UX.

1 Like
#11

You are right. Hence did not bring it up.

:crossed_fingers:
for some magical Wappler solution. :grin:

#12

Bump.