Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Return to page after onBeforeUnload event

Posted on 2009-05-10
9
974 Views
Last Modified: 2012-05-06
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
Comment
Question by:birwin
  • 4
  • 3
  • 2
9 Comments
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24352590
0
 
LVL 6

Author Comment

by:birwin
ID: 24404936
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
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24409563
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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 42

Expert Comment

by:David S.
ID: 24409821
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
 
LVL 6

Author Comment

by:birwin
ID: 24413826
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
 
LVL 42

Expert Comment

by:David S.
ID: 24416580
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
 
LVL 6

Author Comment

by:birwin
ID: 24417787
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
 
LVL 42

Expert Comment

by:David S.
ID: 24417833
Maybe it didn't work because the getDuration() function doesn't have a return value specified. Try adding one to it.
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 24417836
This probably won't work how you want it to though because you're trying to do an asynchronous request there.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question