When is the page left/unloaded

Question

I'm protocolling how long someone is staying at a certain jsp-page, so I have three functions called in my body-tag:

<body onunload="pageLeft();" onload="pageEnter(); startInterval();">

pageEnter sends an ajax-request to the server which contains the ID of the page and a '1' for page-enter.

startInterval starts an interval and sends every few seconds an ajax-request to the server which contains a '2' for being still there.

pageLeft send a '3' by ajax so I know the user has left the page.

Most essential are '1' and '3' which are used to group all the protocolled-data.

There is also a form on the page which has a submit-button:

<form action="/UpdateDB/Customers.jsp" method="POST" name="Custpost">

I was in the intention the form-data would be transferred to Customers.jsp afterwards the current page is unloaded and Customers.jsp loaded. All my trials making the procedures in Customers.jsp work failed and now I found out why:

In the database are only 1s and 2s but no 3. This means the current page was never unloaded - yet the procedure has started already...

I thought about manually setting the 3-entry in the Customers.jsp but this would leave two such entries in the database. Also if the user just leaves the page no 3-entry would be left at all.

What am I supposed to do?

Try using the `onbeforeunload` method and let me know if it works. — Peter Gordon, Dec 11 '15 at 21:10
Well, as I see now it actually got worse... now the pageLeft-Function is not called at all — Qohelet, Dec 14 '15 at 11:17
No, I'm mostly focussing on Firefox. I think somewhere must be a chrome around, but I barely use that — Qohelet, Dec 14 '15 at 13:29

score 0 · Accepted Answer · edited May 23 '17 at 10:27

Unfortunately onbeforeunload didn't work as expected - after the replacement nothing was called. onbeforesubmit didn't look too promising either (but I haven't tried), but I got another idea:

First: Adding a Function which is called on submit to the form, also a variable to distinguish whether the function had been called or not. Also saving the ID of the interval in the variable intervalid (See: Stop setInterval call in JavaScript):

var nosubmit = true;

        $(function () {
            $('#Custpostform').submit(function () {
                if (nosubmit) {
                    pageLeft();
                    clearInterval(intervalid);
                    nosubmit = false;
                    return true; // return false to cancel form action
                }
            });
        });

<!-- -->

<form action="/UpdateDB/Customers.jsp" method="POST" name="Custpost" name="Custpostform">

The rest remains pretty much the same, just the onunload is now slightly modiefied:

<body onunload="if (nosubmit) {
                pageLeft();
                nosubmit = false;
            }"

It's not really the solution I anticipated but it works as supposed

score 0 · Answer 2 · answered Dec 14 '15 at 17:43

0

This way would seem to be better. I can get both onbeforeunload and onunload to work in Chrome and Firefox (I didn't test any others).

See the fiddle for an interactive version.

HTML:

<body onload="testLoad()" onunload="testUnload()" onbeforeunload="return testBeforeUnload()">

</body>

JS:

function testBeforeUnload() {
  return "test before unload event";
}
function testUnload() {
  console.log("test unload event");
}

answered Dec 14 '15 at 17:43

Peter Gordon

1,075
1
18
38

Alright, it looks like a clean solution, but what's your definition of "better"? – Qohelet Dec 15 '15 at 11:02
My version looks cleaner which is what I think is better. This is what these events are designed for. – Peter Gordon Dec 15 '15 at 15:08

When is the page left/unloaded

2 Answers2