asked on

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

Pawel Witkowski

http://www.w3schools.com/JS/tryit.asp?filename=tryjs_confirm

birwin

ASKER

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?

Pawel Witkowski

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

David S.

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>

birwin

ASKER

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?

David S.

If you don't want to just try it, read the page I linked to.

I mean "as the last script in the head".

birwin

ASKER

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.

David S.

Maybe it didn't work because the getDuration() function doesn't have a return value specified. Try adding one to it.

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial