Can't make sens out of javascript event and functions

272
November 22, 2016, at 09:14 AM

Here is the code that works as-is, a classic onBeforeUnLoad event, in the <script type="text/jscript"> tag of my ASP page :

window.onbeforeunload = function (e) {
        a = 1;
        e = e || window.event;
        e.preventDefault = true;
        e.cancelBubble = true;
        e.returnValue = "do you wish to save?";
}

Now, two issues i'm experiencing when wanting to do something more complex :

  1. I want this to appear only once at all cost :

    var a = 0;
    window.onbeforeunload = function (e) {
        if (a == 0) {
            a = 1;
            e = e || window.event;
            e.preventDefault = true;
            e.cancelBubble = true;
            e.returnValue = "Wish to save?";
        }
    }
     //Does not work...
    
  2. I want it to be able to run this other function that works when not combined with the first :

    comfirmExit = function(){
        if (confirm("Wish to save?") == true) {
        document.getElementById('<%= btnEnregistrer.ClientID %>').click();
        }
     }
     // works, but not when combine to the first function
    

I tried to put this all together... I want the unload event to make my confirm box function run :

    window.onbeforeunload = function (e) {
        if (a == 0) {
            a = 1;
        comfirmExit = function(){
        if (confirm("Wish to save?") == true) {
        document.getElementById('<%= btnEnregistrer.ClientID %>').click();
            }
        }
    }

And now I realize I'm far from being an expert of javascript...

Answer 1

The beforeunload event won't run any obtrusive Javascript for the user (ie alert, confirm etc).

But there is an workaround, the steps should be something like:

  • Create a boolean flag to check if the user has canceled the exiting of your page (default false).
  • Create the beforeunload event handler, and check if the game is not saved.

    • If it was already saved, then, you do nothing, and let the user go

    • But if it was not, then you change that boolean flag to true.

  • You keep an interval dirty-checking if that variable is true, and at anytime it is, you save the game for the user, and then set this variable to false again.

So, doing that, you'll ensure the user always see a message if they're leaving without saving, and if they cancel the exiting, the game will be automatically saved, making the next try pretty smooth.

Take a look at the example below. To test it, open your console, click on Run. Then, try to click on Run again, and you'll see an exiting message. If you confirm it, your console won't show anything. But if you cancel it, then, you'll be kept in the page, then you try to click Run again, and you'll see that no message will appear, but the console will log true.

(function() { 
  var game = { saved: false }; 
  var canceled = false; 
   
  setInterval(function() { 
    if (canceled) { 
      game.saved = true; 
      canceled = false; 
    } 
  }, 100); 
   
  window.onbeforeunload = function() { 
    if (!game.saved) { 
      canceled = true; 
      return 'Are you sure?'; 
    } 
    else { 
      console.log(game.saved); 
    } 
  } 
})();

READ ALSO
live search bootstrap with ajax and query

live search bootstrap with ajax and query

Me and some mates have been trying to make a live search script on our search bar. Now this isn't going that well so now we are asking for ur help!.

309
How to find the first input or select or radiobutton or checkbox in a DIV

How to find the first input or select or radiobutton or checkbox in a DIV

I have a HTML with DIV's containing all possible input types i. e.

322
Javascript knockout click binding

Javascript knockout click binding

I have a javascript knockout button that i would like to disable for 3 second after the first click. .

405
Insert copies SVG elements into DOM with GSAP

Insert copies SVG elements into DOM with GSAP

I'm trying to use TweenMax and TimelineMax to animate several circle elements on a page. The actual SVG only has one instance of this particular circle element, but I would like the animation sequence to animate several of these same elements with the same specified...

325