Solved

Return to page after onBeforeUnload event

Posted on 2009-05-10
9
971 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:wilq32
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:wilq32
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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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 …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

707 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now