Angular ui-router Replace browser alert with ngSweetAlert on refresh/reload

Question

I've read and searched for this and found variations (for example, on click) but not for the browser reload/refresh that works.

Basically, what I want is for when a user reloads, refreshes or F5 in the browser, instead of the regular alert confirm, the sweetalert dialog popups up asking the user if they want to refresh, losing whatever information they have viewed, with an OK/Cancel.

In my controller, I have this:

 $scope.$on('$destroy', function() {
    window.onbeforeunload = undefined;
});

window.onbeforeunload = function (e) {
    e.preventDefault();
    SweetAlert.swal({
        title: "I display correctly but....",
        text: "before page refreshes and do not wait for user to click ok",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",confirmButtonText: "Ok",
        cancelButtonText: "Cancel",
        closeOnConfirm: true,
        closeOnCancel: true },
        function(isConfirm){
            if (isConfirm) {
                console.log('do something...')
            }
        });
    return undefined;
};

$scope.$on('$locationChangeStart', function( event, toState, toParams, fromState, fromParams) {
    SweetAlert.swal({
        title: "I display and wait for the user to click but too late",
        text: "...after the page refreshes",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",confirmButtonText: "Ok",
        cancelButtonText: "Cancel",
        closeOnConfirm: true,
        closeOnCancel: true },
        function(isConfirm){
            if (isConfirm) {
                console.log('do something...')
            }
        });
});

The "window.onbeforeunload" part loads at the right time (before the page reloads/refreshes) but does not wait for the user selection.

The "$scope.$on('$locationChangeStart',..." part loads too late (after the page has reloaded/refreshed) but does wait for the user selection.

Besides '$locationChangeStart,' I've also tried '$stateChangeStart' and '$routeChangeStart' to no avail.

What am I missing to make this work? Any help or direction would be greatly appreciated.

I'd be happy to use SweetAlert2 if it makes this easier... (but from just looking at the documentation, I'm not sure that it does). — purplerice, Jun 13 '16 at 12:45
In my opinion you should stay with the native alert() or confirm() because they are blocking. Sweetalert etc are just kind of div / popup-dialog. So user will be still able to leave the page without choosing if he wants to save his data or not, right? — David Votrubec, Jun 13 '16 at 13:09
David Votrubec: thanks for the response. The native alert/confirm comes with the checkbox that allows the user to disable alerts - something that I can't allow for a critical functionality. If a user is about to lose what they've built, I have to give them this alert always. — purplerice, Jun 13 '16 at 13:14

score 0 · Answer 1 · edited May 23 '17 at 10:29

You should not override native functions such as alert() or confirm() because they are blocking and they are blocking for a good reason.

But if you really want to do it, it is possible like this

/** 
 * Definition of global attached to window properties <br/>
 */ 
    (function() {
      nalert = window.alert;
      Type = {
          native: 'native',
          custom: 'custom'
      };
    })();

/**
 * Factory method for calling alert(). 
 * It will be call a native alert() or a custom redefined alert() by a Type param.
 * This defeinition need for IE
 */ 
    (function(proxy) {

          proxy.alert = function () {
          var message = (!arguments[0]) ? 'null': arguments[0];
          var type = (!arguments[1]) ? '': arguments[1];

          if(type && type == 'native') {
           nalert(message);
          }
          else {
               // TODO: Call to SweetAlert()
               document.write('<h1>I am redefiend alert()<br/>Alert say: '+message+'</h1>');
          }     
      };
   })(this);

More on this here JavaScript: Overriding alert()

Angular ui-router Replace browser alert with ngSweetAlert on refresh/reload

1 Answers1