The Atlanta ColdFusion User Group (ACFUG) Message Board › Can On Intercept Attempts to Exit a Page Without Saving Data?

Can On Intercept Attempts to Exit a Page Without Saving Data?

Peyton T.
PeytonTodd
Atlanta, GA
Post #: 1
Hey guys,

A client I wrote a web app for a few years ago has requested that I warn users when they are about to exit a page (for example by closing the browser) without saving their changes, and allow them to return to the page to do so. It would seem that this should be simple, but am I correct in concluding that no simple solution is possible?

My attempt to solve this problem is presented after the double lines below (I saw no way to attach it), in code that reduces my approach to its bare essentials, and is entirely self-contained since is uses only HTML and Javascript. It relies upon the onunload event handler attached to the <body> tag. But it turns out that it only works some of the time with the Back button (it depends on what's in the history at that point), and it doesn't work at all if the user simply closes the browser. Apparently designers of the Document Object Model and/or Javascript figured that if you're really leaving the page for good, there's no point in running an onunload event handler.

Keep in mind that the solution, if there is one, has to be simple since the client will not pay for more than a few hours devoted to it. The app itself (designed for court reporters to inform their company about what transpired on a job they were sent on) is quite complex since it populates the page with user-selected, and sequentially added subsets of up to seven different DIV's with some of the DIV's permitting the user to add an arbitrary number of court cases, and within each case an arbitrary number of child records (e.g. witnesses). Each DIV has its own Save button, allowing it to be updated at any time independently of the other DIV's via AJAX. My approach relies upon the fact that each Save button is disabled until the user enters something in the DIV it belongs to, then gets disabled again when the DIV is saved. That makes it easy to check for whether there are unsaved changes since all one has to do is look for DIV's that are not disabled, being sure to check first for each possible DIV Save button whether it happens exist on this particular instantiation of the page.

Could it really be true that there is no simple way to solve this?

Peyton

======================================­===========================
Start Page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Start</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
<META HTTP-EQUIV="cache-control" VALUE="no-cache, no-store,must-revalidate"/>
</head>

<body bgcolor="#FFFFFF" text="#000000" style="margin-top:0%; margin-left:0%; margin-right:0%">

<form method="POST" id="myform" name="myform" action="test.htm">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="80%">
<TR height="35px">
<TD align="left">
<button type="button" id="mybutton" style="width:44" onclick="submit()">Start<­/button>
</TD>
</TR>
</TABLE>
</form>

</body>
</html>
======================================­=========================
Main page, named Test.htm, linked to by the Start page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<script type="text/javascript">

function SubmitFmTx(){
alert('only pretending to save');
document.getElementById("MyInput"­).value = "";
document.getElementById("MyInput"­).focus();
document.getElementById("SaveTx"­).disabled = true;
}

function EnableTx(evt){
document.getElementById("SaveTx"­).disabled = false;
}

function ConfirmExit(){
if (document.getElementById('SaveTx') && document.getElementById('SaveTx').disabl­ed == false){
msg = "\nEXIT WITHOUT SAVING YOUR CHANGES?\n\n" +
"To save your changes, click Cancel, then\n" +
"click the appropriate Save button(s)";
if (confirm(msg)){alert('exit the page'); return true;}
else {alert('stay on the page'); return false;}
}
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onload="document.getElementById('My­Input').focus()"
onunload="javascript:if (!ConfirmExit()) history.go(0);">

<form method="POST" id="fmTx" name="fmTx" action="SubmitFmTx()">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="200">
<TR height="40px">
<TD align="left">
<input id="MyInput" name="MyInput" size="5" maxlength="8" value=""
onkeypress="EnableTx(event)">­
</TD>
<TD align="right">
<button type="button" id="SaveTx" style="width:74" disabled
onclick="SubmitFmTx()">Save­</button>
</TD>
</TR>
</TABLE>
</form>

</body>
</html>


Charlie A.
carehart
Alpharetta, GA
Post #: 213
Peyton, I'll share just one opinion (not that well-informed) to say that yes, I would suspect it's NOT that easy, because if it was, I'd expect we'd see it built into CF. At least traditionally, there have been many issues with this use case, challenged then by differences in browsers, javascript versions, etc.

I would think you would NOT be able to develop a robust solution (that would work across most browsers) in just a few hours.

Maybe others will chime in with more answers.

Along those lines, I'll propose that while yes, we do have this forum within the meetup.com group, you may not get as much discussion here as you would in the older mailing list: http://old.acfug.org/...­. I'll note that this is referred to from the "read more about us" on the top left navbar on the main page. Somebody may want to add a note that's pinned to the top of this discussion forum that suggests people consider that instead.
Charlie A.
carehart
Alpharetta, GA
Post #: 214
Too funny. I see that even as I was writing the above, Josh Adams had indeed done just that: created a note pointing to the old lists page and pinning it to the top. Good on ya', Josh. :-)
Powered by mvnForum

Our Sponsors

  • Adobe

    Adobe

  • Vaco

    Technical Recruiter

  • FusionLink

    ColdFusion and Flex Hosting

  • O'Reilly

    The most popular publisher of RIA technology books.

  • Lynda

    Online Training

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy