Javascript Help

warrenaldo

Hi folks,

I am developing a web page - where if the user leaves the page - ie by clicking on any other button on the page (or maybe even by pressing back). That a popup appears saying "are you sure you want to leave this page without saving?"
I am developing in VB.NET - using master pages.

I only really need the Javascript solution to this.

Thanks

Eoin

warrenaldo wrote:

Hi folks,

I am developing a web page - where if the user leaves the page - ie by clicking on any other button on the page (or maybe even by pressing back). That a popup appears saying "are you sure you want to leave this page without saving?"
I am developing in VB.NET - using master pages.

I only really need the Javascript solution to this.

Thanks

Google for window.unload, but it seems a little messy. I think refreshing the page will trigger the function too.

Is this for an internal web-application where it may be appropriate for this type of message? If not, then I would stay away from that kind of scripting; it's incredibly annoying for users. If they didn't mean to leave the page, they have a back button.

Ginger

On the flip side, its better for them to be aware that they would be loosing some of their work...

We implemented a similar system and it cut down support calls by 90% by just adding that prompt

seamus

eoin_s wrote:

If they didn't mean to leave the page, they have a back button.

This can be tempermental though and browser-dependent. Sometimes the page may reload with blank values, in IE you may see "This page has expired" and so. It would require some testing in itself to ensure that users *could* indeed use their back button.

I agree though that it is a "feature" which needs to be given some consideration. I can think of numerous times where I come upon a page with a form asking for a whole pile of details, and I just close it cos I can't be arsed. This type of prompt would be very annoying indeed. Perhaps a certain amount of logic should be built into the function called by onunload(). Check to see if certain key fields have been filled out before asking whether they're sure. I'm not sure if you can detect the event type - maybe only prompt if they go to close the window, but allow them to go back or reload the window.

If it's a login system (i.e. users will be logged in before they start filling out the forms), there's big kudos and experience to be gained by implementing an AJAX system for autosaving the form data like Gmail does with emails. If the user inadvertently closes a window (or the machine crashes), then they can go back in and retrieve most of the data they'd entered.

Certainly in my place, there are many forms where users may begin to fill them out, then have to go off and get more info from someone else, and leave the half-filled form sitting in the background for a couple of hours. Then they close it or reboot and go mad cos their work is gone.

Eoin

Ginger wrote:

On the flip side, its better for them to be aware that they would be loosing some of their work...

We implemented a similar system and it cut down support calls by 90% by just adding that prompt

Like I said, if it's for an web app type thing, then it may not be a bad idea - just not for an every day website. In general, I consider browser buttons / controls / shortcuts and all that stuff the "property" of the user, and not for me to mess around with, but I can see where this could be of benefit if used properly.

I think there's also a window.onbeforeunload which may be useful to the OP. It's probably IE specific, but that may not be a problem for a work app if IE is the company standard.

warrenaldo

Yes it is an internal system. Otherwise i would not implement this - its very annoying.
Reading about window.unload and window.close - it looks like they are very problematic.

Regarding the AJAX Solution - It would be great. And i would love to do it. But this system has been a major monkey on my back that im dying to get rid off. So i want the simple easy 1 liner.

I mite just leave it out then - thanks guys.

tommycahir

How about trying something like the below

<BODY onbeforeunload=HandleOnClose();>

function HandleOnClose() 
{
   if (event.clientY < 0) 
   {
        event.returnValue = 'You are going to close the Wizard, Did you save your data?';
   }
}

Eoin

I had a quick look at this, and only had time to write it for IE.

You can add and remove events as below, so when the form is submitted, you don't get prompted. Hope this helps.

[html]
<%
If Request.ServerVariables("HTTP_METHOD") = "POST" Then Response.Write "Form submitted - no JS popup<br/>"
%>
<html>
<head>
<title>test</title>
<script type="text/javascript">
function doLoad()
{
if (document.addEventListener)
{
// non IE stuff here
}
else
{
window.attachEvent('onbeforeunload', doCheck);
}
}

function removeAlert()
{

if (document.addEventListener)
{
// non IE stuff here
}
else
{
window.detachEvent('onbeforeunload', doCheck);
}
}

function doCheck()
{

var boolIE = true;
if (!boolIE)
{
//non IE stuff here
}
else
{
event.returnValue = "You may lose unsaved work";
}
}


</script>
</head>
<body id="test" onload="doLoad()">
text of page
<form name="frmTest" action="1.asp" method="post" onsubmit="removeAlert()">
<input type="submit" id="cmdSubmit" value="submit form">
</form>
</body>
</html>
[/html]