[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 997
  • Last Modified:

Return to page after onBeforeUnload event

I have a function, triggered by an onBeforeUnload event. It triggers an alert, telling the person they have not spent enough time on a page, or clicked their mouse enough times (navigating the training) to be credited for reading it. The alert has an "OK" button. If they press the button, they are taken to the page they exited to.

Is there a way to have the alert give them the option to remain on the original page, with that page's timing intact, so they can continue to read further if they wish?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;  charset=ISO-8859-1? " /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<html>
<head>
<title> Training Program</title><link rel="stylesheet"  type="text/css" href="/xxxxxx/xxxx_css.php" >
<script src="http://xxxxxxxxx/xxxxxxxxxxxx/AJAX/jquery/jquery-latest.js" type="text/javascript"></script>
       <script type="text/javascript">
   var divCount = null;
   var count = 0;
   var objectHasFocus = false;
   var __event = null;
   var x, y;
   function add(isDouble)
   {
      if (!divCount)
      {
         divCount = document.getElementById("divCount");
      }
      count++;
      divCount.innerHTML = count;
   }
   function checkAdd()
   {
      x = event.clientX;
      y = event.clientY;
      window.setTimeout("checkAddContinue()", 0);
   }
   function checkAddContinue()
   {
      if ((x >= 0) && (y >= 0) && (x <= document.body.clientWidth) && (y <= document.body.clientHeight) && objectHasFocus)
      {
         focus();
         add();
      }
   }
   function __focus()
   {
      objectHasFocus = true;
   }
   function __blur()
   {
      objectHasFocus = false;
   }
</script>
        <script type="text/javascript">
var startDateTime = getNow()
var clickMessage = new String( "\n\nYou have used your mouse to advance the training " +count+ "times, which indicates you have not completed the training.");
function getDuration()
{
//      alert(dateDiff(startDateTime, getNow()))
        $.ajax({
  url: "test_duration.php?emp=loud&chain=arpoints&training_series=HDMIa&ff_nm=Frank&ll_nm=Hammer&email_address=&training_code=HDMIa_1&pplang=en&click_count="+count+"&session=ou9rp4a07a356158&module=HDMIa_1&diff="+escape(dateDiff(startDateTime, getNow())),
  async: true
 })
}
function getNow()
{
      var d = new Date();
      return d.getYear() + "/" + d.getMonth() + "/" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
function dateDiff(strDate1,strDate2)
{
     datDate1= Date.parse(strDate1);
     datDate2= Date.parse(strDate2);
     dur =( (datDate2-datDate1)/(24*60*60))*100;
       if (dur < 120 )
       {
             dur =  Math.round(dur);
          alert( "You have spent " + dur + " seconds on this page\n\n This is either not enough time to properly review this module \n or your click count of " +count+ " indicates the material was not actively viewed        \n\n This module will continue to show as unread." );
       }
       else
       {
            dur =  Math.round(dur);
       }
      return dur
}
</script>
</head>
 
 
<body    onclick="add()" ondblclick="add()" onblur="checkAdd()"  onBeforeUnload="getDuration()" >
 
BODY TRAINING LESSON
 
</body>
</html>

Open in new window

0
birwin
Asked:
birwin
  • 4
  • 3
  • 2
1 Solution
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
0
 
birwinAuthor Commented:
I understand how to use a confirm box, my problem is that I am trying to find a way to allow the user to return to the original page, after an onBeforeUnload event. They would have created the event by clicking on one of many links on the page.
Is that possible, using JavaScript or jquery?
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Well maybe I misunderstood problem at first time. From what I know you cannot give possibility to user to stay on page that he is exiting (by onunload). Imagine all bad pages with nasty advertises that do so... brrr... But of course you could try to set window.location  to original  after clicking 'stay on page' - if it will work it will probably reload page, but you could have half of this feeling that you need
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
David S.Commented:
The onbeforeunload and onunload events are different.
http://bytes.com/topic/javascript/insights/825556-using-onbeforeunload-javascript-event

Try removing this attribute from <body>:  onBeforeUnload="getDuration()"

and then add this after the other script elements:

<script type="text/javascript">
window.onbeforeunload=function(){
  return getDuration();
}
</script>
0
 
birwinAuthor Commented:
Kravimir: I am not sure how this helps me return to the original page.
Also, does "after the other script elements" mean at the end of the body or as the last script in the head?
0
 
David S.Commented:
If you don't want to just try it, read the page I linked to.

I mean "as the last script in the head".
0
 
birwinAuthor Commented:
I did try it.
if I add confirm, the functionality appears OK, but geDuration never fires.
<script type="text/javascript">
window.onbeforeunload=function(){
  return confirm getDuration();
}
</script>
If I change the alert in the getDuration() function to confirm (see my full code in the original question). It proceeds to the link, even if I do not confirm.
 
0
 
David S.Commented:
Maybe it didn't work because the getDuration() function doesn't have a return value specified. Try adding one to it.
0
 
David S.Commented:
This probably won't work how you want it to though because you're trying to do an asynchronous request there.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now