3

I have some pages on my site that allow users to create and edit posts. When a user is on these pages, I'd like to warn them before leaving the page. I can do that like this:

//Only warn if user is on a New or Edit page if(window.location.href.indexOf("/new") !== -1 || window.location.href.indexOf("/edit") !== -1 { window.addEventListener('beforeunload', function (e) { e.preventDefault(); e.returnValue = ''; }); //Doing this again because I don't know which version is compataible with all browsers window.onbeforeunload = function (e) { e.preventDefault(); e.returnValue = '' }; };

On a New or Edit page, the information in a form gets submitted to the server using JQuery ajax. The server returns a URL which the user gets redirected to to see the results of their post/update like this window.location.href = result; with result being the URL sent back from the server.

When that code runs to do the redirect, the user is getting the warning that they are about to leave the page they are on. I don't want it to do this on any redirects/navigation that the user has not performed. How could I stop/remove the warning in this instances?

UPDATE: This is not a duplicate. This question asks about preventing a beforeunloadevent happening on a redirect where the user has not requested to move away from the page himself.

Improve this question
4
  • 1
    It would also help if you read the link that the duplicate points to and try out the solution there, because that question's answer is the answer to your problem here. beforeunload doesn't trigger unless the user initiates the navigation. Commented Apr 16, 2019 at 20:38
  • 1
    @ScottMarcus How is it when the other answer simply says how to display a confirm dialog when a user navigates away from the page. I am talking about preventing the dialog from appearing on a AJAX redirect. There is no solution on that other answer. Commented Apr 16, 2019 at 20:40
  • 1
    Have you tried just adding the beforeunload event registration without any if/then logic and just with .addEventListener() instead of also with the onbeforeunload property? Commented Apr 16, 2019 at 20:44
  • @ScottMarcus Can you cite your source for "beforeunload doesn't trigger unless the user initiates the navigation"? I can't find any documentation to that effect, but the OP wouldn't be having this problem if it were true Commented Apr 16, 2019 at 20:52

2 Answers 2

Reset to default
3

Because you may want the event bound in some circumstances but not others within the same window, you'll have to not only add the event handler to the window, but you'll have to remove it as well (under the right circumstance) because even though you are changing the URL of the document loaded in the window, you are not changing the window itself:

function handleBeforeUnload (e) { e.preventDefault(); e.returnValue = ''; } //Only warn if user is on a New or Edit page if(location.href.indexOf("/new") !== -1 || location.href.indexOf("/edit") !== -1 { window.addEventListener('beforeunload', handleBeforeUnload); } else { // Remove the previously registered event handler (if any) window.removeEventListener('beforeunload', handleBeforeUnload); }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

If you want to force a navigation with window.location.href, you should disable the beforeunload event listener before you navigate.

Something like this, for example:

function unloadHandler(e) { e.preventDefault(); e.returnValue = ''; } window.addEventListener('beforeunload', unloadHandler); function forceNavigation(url) { // Remove the "are you sure you want to leave?" message, then navigate window.removeEventListener('beforeunload', unloadHandler); window.location.href = url; }

Call forceNavigation('https://example.com') to navigate without warning the user.

JS fiddle here: https://jsfiddle.net/o918wsam/1/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.