Aaron Lynch

Here at the day job we have a very large mortgage loan application form that, now that we have rewritten it, makes AJAX calls to the bean onChange of each field.

These calls are made asynchronously, which means the user really has no idea that the post is being performed. (unless they happen to be watching their firebug console) But, if they ever decided to log out, click on some other link, close their tab, etc...any data being posted at that time could (and probably would) be lost forever.

The challenge: Make sure the users don't leave the page, or submit the application mid AJAX post.

Now, there is no real way to lock a user to the computer and make them wait until the saves are completed. But we can monitor the state of the AJAX request and, based off of that, decide whether or not to alert the user that they shouldn't leave the page.

The solution: (well part of it anyways) window.onbeforeunload

Now, as part of the AJAX call we monitor the readystate and look for a '4' value. A value of 4 represents a completed request. (here are the readyState status codes)

As we monitor the readyState and watch for that '4', we flag a variable I called 'completionIndicator'. False on the initial AJAX request, set to True ones a readyState of 4 is returned.

Now that we know whats going on with AJAX, we can decide whether or not to "lock" the user to the form. What I came up with was the use of window.onbeforeunload which is used to execute statements whenever the user exits the document.

So, anytime the users tries to exit the document, we run a method I called checkProgressState(). There I conditionally return a message to window.onbeforeunload. If nothing is returned, no message (confirmation window) will be displayed.

You will notice I am return a string in that call. If you return a message to window.onbeforeunload it will insert the text between to two default messages on the confirmation box.

All done right?... Um, no. Now we have to deal with Internet Explorer. (dear bill gates, please stop making my job harder)

Our super cool AJAX'y mortgage loan application form is a super huge form. All said and done there are now 9 tabs full of questions which we swap in and out all client-side, cool right? Not if you ask Mr. Gates.

Each of our tabs has an anchor tag which fires a few routines onclick to swap out the current content, with the desired tab's form content. And luckily for me, IE (both 6 and 7) treated that as a page exit and would thus fire the window.onbeforeunload stuff I had working so sweetly in Firefox.

Hey, I like challenges: What can we do to stop IE from being so IE about this?

In order to stop IE from running my "Are you sure you want to leave.?!" stuff each tab click, I had to flag a new variable that would allow me to turn on and off the function from above. So onclick of a tab, we set a new variable I called 'checkProgressFlag' to FALSE, then once my new tab/content were done swapping, set the value back to TRUE.

Now all of our users filling out the application will at least be warned about why they shouldn't leave just quite yet.