On  ASP.Net / AJAX recent project I was asked to ensure that users cannot navigate away from a web form if they have made changes that have not yet been submitted.

Requirements

The requirements were:

• Enable users to submit the form by clicking the “Save” or “Cancel” buttons.
• When user navigates away using any other method, show a dialog that states that changes will be lost if the user continues. These methods to include:
  • Any other controls on the page
  • Back button
  • Refresh button
  • Typing another address in the address bar
  • Picking another page from history
  • Closing the web browser
  • Anything else
• Only show the dialog if the form is “dirty” (ie. there are unsaved changes”
• Work with IE6 (I know, I know).
• The solution should work client-side, so must be written in JavaScript.

Note that his solution has not been tested with other browsers.

Preventing Users Navigating

When a user attempts to navigate using any of the methods above, the window.onbeforeunload event will fire. We can use this event to pop-up a dialog that warns the user that she has not submitted her changes, and asks her to confirm that she wants to continue.

Checking for Dirt

In order to check for dirtiness, we must compare the original value of all the controls on the page with their value when they are submitted. A number of sources suggest that the browser maintains the default value for controls, and that we can compare the current value with that default value in the onbeforeunload event handler. However, there are several issues with this approach:

• The default value is generally reset following an AJAX postback. This means that we must preserve the control’s original values of the controls when they first load, so gain nothing from using the browser’s method for tracking value changes.
• In IE6, the defaultSelected property of HTML OPTION controls is, by default, set to true for all items in a drop-down list. The ASP.Net list control appears to set this value explicitly, I didn’t want to have to do so on the equivalent HTML control. As a result of the default, however, it is often impossible to determine if the user has unselected an item or if they have simply not selected the item. As a result it is best to track changes to the selection of options ourselves, rather than using the browser’s faulty tracking mechanism.

Allowing Certain Controls to Submit without Warning

It is important that some controls are able to submit the form without the using being warned that changes have been made. Typically, these controls include a button that allows the user to save her changes, and possibly one to exit without saving.

In order to implement these, we set a flag that indicates that a dirtiness check is required, then use the client-side click event of the buttons to reset the flag so that the check isn’t performed when these buttons are clicked.

OnBeforeUnload Sometimes Fires Twice

There is a bug in IE6 that means that, under some circumstances, the onbeforeunload event fires twice. We don’t want the confirm dialog to be displayed twice when the user attempts to leave a page, so we need to take measures. It is easy to set a flag the first time the onbeforeunload event fires that indicates that we can ignore it the second time. The slight complication is that the user may click “cancel” to prevent the navigation when the dialog first appears. If that happens, we don’t want to suppress the confirmation dialog for  subsequent attempts to navigate away from the page. The solution is to start a timer that will reset the flag if the user remains on the page, thus allowing the dialog to appear when the user attempts to navigate again.

The Code

Here’s the JavaScript that I use:

<script type="text/javascript">
<!--

    // Function to maintain original default states for all fields.
    //  In order to test for dirtiness, we will be checking if the default
    //  value for each control matches its current value. However, this
    //  default is not normally preserved across partial postbacks. We need to
    //  preserve these values ourselves.
    function keepDefaults(form) {

        // Get a reference to the form (in ASP.Net there should only be the one).
        var form = document.forms[0];

        // If no original values are yet preserved...
        if (typeof (document.originalValues) == "undefined") {

            // Create somewhere to store the values.
            document.originalValues = new Array();

        }

        // For each of the fields on the page...
        for (var i = 0; i < form.elements.length; i++) {

            // Get a ref to the field.
            var field = form.elements[i];

            // Depending on the type of the field...
            switch (field.type) {

                // For simple value elements...     
                case "text":
                case "file":
                case "password":
                case "textarea":

                    // If we don't yet know the original value...
                    if (typeof (document.originalValues[field.id]) == "undefined") {

                        // Save it for later.
                        document.originalValues[field.id] = field.value;

                    }
                    break;

                // For checkable elements...     
                case "checkbox":
                case "radio":

                    // If we don't yet know the original check state...
                    if (typeof (document.originalValues[field.id]) == "undefined") {

                        // Save it for later.
                        document.originalValues[field.id] = field.checked;

                    }
                    break;

                // For selection elements...     
                case "select-multiple":
                case "select-one":

                    // The form is dirty if the selection has changed.

                    // For each of the options...
                    var options = field.options;
                    for (var j = 0; j < options.length; j++) {

                        var optId = field.id + "_" + j;

                        // If we don't yet know the original selection state...
                        if (typeof (document.originalValues[optId]) == "undefined") {

                            // Save it for later.
                            document.originalValues[optId] = options[j].selected;

                        }
                    }
                    break;
            }

        }
    }

    // Call function to preserve defaults every time the page is loaded (or is
    // posted back).
    Sys.Application.add_load(keepDefaults);

    // Assume that a check for dirtiness is required.
    //  If this value is still true, we will check for dirtiness when the page
    //  unloads.
    var dirtyCheckNeeded = true;

    // Function to flag that a check for dirtiness is not required.
    //  Called by Save and Cancel buttons to indicate that a dirty check is
    //  not actually required.
    function ignoreDirty() {
        dirtyCheckNeeded = false;
    }

    // Function to check if the page is dirty.
    //  The function compares the default value for the control (the one it
    //  was given when the page loaded) with its current value.
    function isDirty(form) {

        // For each of the fields on the page...
        for (var i = 0; i < form.elements.length; i++) {
            var field = form.elements[i];

            // Depending on the type of the field...
            switch (field.type) {

                // For simple value elements...     
                case "text":
                case "file":
                case "password":
                case "textarea":

                    // The form is dirty if the value has changed.
                    if (field.value != document.originalValues[field.id]) {
                        // Uncomment the next line for debugging.
                        //alert(field.type + ' ' + field.id + ' ' + field.value + ' ' + document.originalValues[field.id]);
                        return true;
                    }
                    break;

                // For checkable elements...     
                case "checkbox":
                case "radio":

                    // The form is dirty if the check has changed.
                    if (field.checked != document.originalValues[field.id]) {
                        // Uncomment the next line for debugging.
                        //alert(field.type + ' ' + field.id + ' ' + field.checked + ' ' + document.originalValues[field.id]);
                        return true;
                    }
                    break;

                // For selection elements...    
                case "select-multiple":
                case "select-one":

                    // The form is dirty if the selection has changed.
                    var options = field.options;
                    for (var j = 0; j < options.length; j++) {
                        var optId = field.id + "_" + j;
                        if (options[j].selected != document.originalValues[optId]) {
                       
                            // Uncomment the next line for debugging.
                            //alert(field.type + ' ' + field.id + ' ' + options[j].text + ' ' + options[j].selected + ' ' + document.originalValues[optId]);
                            return true;
                        }
                    }
                    break;
            }
        }

        // The form is not dirty.
        return false;
    }

    // Clicking on some controls in (at least) IE6 caused the onbeforeunload
    // to fire *twice*. We use this flag to check for this condition.
    var onBeforeUnloadFired = false;

    // Function to reset the above flag.
    function resetOnBeforeUnloadFired() {
        onBeforeUnloadFired = false;
    }

    // Handle the beforeunload event of the page.
    //  This will be called when the user navigates away from the page using
    //  controls on the page or browser navigation (back, refresh, history,
    //  close etc.). It is not called for partial post-backs.
    function doBeforeUnload() {

        // If this function has not been run before...
        if (!onBeforeUnloadFired) {
       
            // Prevent this function from being run twice in succession.
            onBeforeUnloadFired = true;

            // If the dirty check is required...
            if (dirtyCheckNeeded) {

                // If the form is dirty...
                if (isDirty(document.forms[0])) {

                    // Ask the user if she is sure she wants to continue.
                    event.returnValue = "If you continue you will lose any changes that you have made to this record.";

                }
            }
        }
       
        // If the user clicks cancel, allow the onbeforeunload function to run again.
        window.setTimeout("resetOnBeforeUnloadFired()", 1000);
    }

    // Hook the beforeunload event of the page.
    //  Call the dirty check when the page unloads.
    if (window.body) {
        // IE
        window.body.onbeforeunload = doBeforeUnload;
    }
    else
        // FX
        window.onbeforeunload = doBeforeUnload;

    // -->
</script>

The source code for my Save and Cancel buttons looks like this:

<asp:Button ID="btnEdit" runat="server" Text="Save" OnClick="btnEdit_Click" OnClientClick="ignoreDirty();" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btn btnCancel" OnClick="btnCancel_Click" OnClientClick="ignoreDirty();" CausesValidation="false" />

References

I looked at a range of solutions before developing the one I present here, including:

• Prompting a User to Save When Leaving a Page
• Dirty Forms and The UserData Persistence Behavior with XMLDocument Property

What makes a good IT solution?

Theory = “A coherent group of general propositions used as principles of explanation for a class of phenomena.” Random House Dictionary

Consider the analogy, Solution = Theory.

T: Explains a whole class of phenomena.

S: Solves a whole class of problems.

T: Predicts results that have not yet been discovered.

S: Highlights and solves problems that have not yet been defined.

T: Does not conflict with existing results.

S: Does not break existing solutions.

T: Parsimony: Everything else being equal, the simplest theory is to be prefered.

S: As simple as possible, but no simpler.

T: No one theory explains everything.

S: No one solution provides a universal panecea.

T: Models changing realationships between observed data over time

S: Models changing relationships between input data over time

References

• Developing a Good Theory

We’re like grass:

• A single blade is unimpressive. Grass is better in community.
• Grass bursts through the cracks in stone. Life finds a way.
• Grass is hungry for light.
• Grass provides nourishment for animals.
• Grass grows.
• Grass produces more grass.
• Grass needs looking after to look good.
• Grass is pleasing to the eye. That’s part of its purpose.

We’re not like grass:

• Grass is green.

Effect is more important than effort.

Spend more time sharpening the axe and less time flogging the trees.

Notes from a sermon I heard:

Maturity and Success

Success = Service

As we mature, we develop in:

• Precision
• Power

This takes:

• Discipline
• Focus

How did Jesus Serve?

Mk 10:35-45 (NIV):

 ³⁵Then James and John, the sons of Zebedee, came to him. “Teacher,” they said, “we want you to do for us whatever we ask.”

 ³⁶“What do you want me to do for you?” he asked.

 ³⁷They replied, “Let one of us sit at your right and the other at your left in your glory.”

 ³⁸“You don’t know what you are asking,” Jesus said. “Can you drink the cup I drink or be baptized with the baptism I am baptized with?”

 ³⁹“We can,” they answered. Jesus said to them, “You will drink the cup I drink and be baptized with the baptism I am baptized with, ⁴⁰but to sit at my right or left is not for me to grant. These places belong to those for whom they have been prepared.”

 ⁴¹When the ten heard about this, they became indignant with James and John. ⁴²Jesus called them together and said, “You know that those who are regarded as rulers of the Gentiles lord it over them, and their high officials exercise authority over them. ⁴³Not so with you. Instead, whoever wants to become great among you must be your servant, ⁴⁴and whoever wants to be first must be slave of all. ⁴⁵For even the Son of Man did not come to be served, but to serve, and to give his life as a ransom for many.”

Characteristics of a True Servant

• Willing to be anonymous
• Committed to God: once and for all
• Rights given up
• It comes from the gut: Jesus *wanted* to wash the disciple’s feet.

Becoming a Servant

If you don’t want to serve, you have an impure heart: but Jesus can purify our hearts. Be truthful. Repent.

The question is not ‘do you want to serve?’, but ‘do you want to change?’

 Talent / intellect / training / money / success / maturity are not required to make a start.

When I practiced Karate, I was taught the following timing for breathing excercises:

• Meditation breaths / minute = 7.5 (naturally, breathing will be quicker during practice sessions)
• Count 1 for in-breath, count 4 for out-breath

A dialog:

“What was that?”
“What was what?”
“That.”
“That what?”
“That noise.”
“What noise?”
“That noise back there.”
“Back where?”
“Where the noise was!”
“What do you think it was?”
“Would I be asking if I knew?”
“I don’t know, would you?”
“Why would l do that?”
“You always do things like what”
“Like what?”
“You know what! You just pretend you don ‘t.”
“I don’t know what you mean.”
“There you go again! Pretending you don’t know something just to make me look stupid!”
“How can that possibly make sense?”
“Whenever you ask me something it isn’t because you don’t know: it’s because you do know, but you want me to say that I don’t know.”
“You really think… Wait! There it was again!”
“What?”

Come out from the shadow of your history and embrace your destiny.

I make no request,
But the ground-
It offers me the support
I crave.
Through the soles of my feet
I sense it’s solidity
And it’s mature strength,
Unlike the shoulder of a friend
It will never let me down
But will hold me up
And make me strong.
It will not let me just slip
Through and fade away -
It gives me a sense of reality
And in turn I establish that
The ground is also real.
That frightens me though,
Because it is also a prison wall
That can never let me escape
Into another world
Where I might otherwise chose
To be

• Christopher
• Adam
• Michael
• Calvin
• Andrew
• Matthew