Home / Questions / 221797
Accepted
Chofoteddy
Asked: 2020-12-13 18:40:15 +0800 CST 2020-12-13 18:40:15 +0800 CST

How to alert the user before leaving a task? (onExit, onRefresh)

  • 772

I am working on a fairly simple evaluation system, but the point is that on the same screen a user can add dynamic elements and later fill in information.

The problem is that if a user (whether by mistake or for another reason) wants to refresh or close the tab, they are alerted about the pending changes or about the loss of their progress; Kind of like Facebook does when you leave a post halfway through and want to exit the tab.

What is the event that is triggered? or what function should be registered for it?

// Se ejecuta si el usuario trata de salir con cambios pendientes.
document.addEventListener('leave', fn (evt) {});

I imagine that in a way I also need to notify the browser that there are "things" pending, correct?

javascript

1 Answers

  1. Best Answer

    You can use the Window.onbeforeunload event to return a function, which in this case, prevents the user from quitting before saving the data.

    var _msg = "Are you sure you want to leave?";
window.onbeforeunload = function (e) {
  var message = _msg;
  if (typeof e == 'undefined') {
    e = window.event;
  }
  if (e) {
    window.confirm(_msg);
    e.returnValue = message;
  }
  return message;  
}
    1. In the first case we have defined a variable that contains the text that we want to be displayed in the alert to the user.
    2. We declare the Window.onbeforeunload event that will return an anonymous function.
    3. Before performing any other operation, it is good practice to check that the event that called this function is not null.if (typeof e == 'undefined')
    4. Once we have this we can display a confirm() notification on the screen which has two return actions, Accept and Cancel or true and false .
    5. Finally we return through the defined event.

    This also works if you try to go back in the browser's History or try to refresh the browser window.

    window.onbeforeunload

    window.confirm()

    I hope it will be of great help to you.

    • 2