If everything in the update goes okay the ColdFusion template will send the page a success XML message that would look something like this:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<data>
<Success>Successfully updated employee record.</Success>
</data>

Now, let's say that the extension is in use. Our ColdFusion template will return a error XML message that would look something like:

<?xml version=""1.0"" encoding=""UTF-8"" standalone=""yes"" ?>
<data>
<error>There was a error updating the employee, extension is in use by Desmond Mason.
Please call the help desk at x555.
</error>
</data>

To complete the application we have to have a way to handle the XML sent back to the requesting page.

Creating JavaScript to Handle the Errors
Let's take a look at what we've done so far: we've created our CSS style classes, we've created our display container, we have our query, our template to update the employee record, and created our error-handling logic. The next step is to read the response from the server, parse through the XML, and set the appropriate display condition. We'll start this step by creating a function to show error messages. This function will need two parameters: the message text and an indication of whether or not this is an error message.

We'll start writing this function by setting a variable with a value that will represent the name of the message area - this, again, is our display container. Now that we have our display container we have to set the class of the display container conditionally based on the error parameter. Finally, we can set the innerHTML property of message node equal to the message's value:

function ShowMessage(message, isError)
{
    messageArea = document.getElementsByName('message')[0];

    if(isError)
    {
      messageArea.className = 'error';
    }
    else
    {
      messageArea.className = 'message';
    }

    messageArea.style.display = 'block';
    messageArea.innerHTML = message;
}
if(response.childNodes[0].nodeName == 'error')
{
ShowMessage(response.childNodes[0].firstChild.nodeValue,true);
}

After the ShowMessage function is written we have to write the logic to check the value of the first node returned. Since we called an update page we expect the first node to be named either "error" or "success" so we create code that will check to see if this is true:

if(response.childNodes[0].nodeName == 'error')
{
ShowMessage(response.childNodes[0].firstChild.nodeValue,true);
}
else
{
ShowMessage(response.childNodes[0].firstChild.nodeValue,false);
}

Let's look at our example of updating the employee record again. In the first case we got an XML message that looked like:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<data>
<Success>Successfully updated employee record.</Success>
</data>

In this case our script would call the ShowMessage function with the error Boolean value set to false. The resulting page would look something like Figure 2.

Now let's look at the same page if the server returned an error because the employee's extension is used by another employee. As mentioned above, the XML message returned from the ColdFusion template would look like:

<?xml version=""1.0"" encoding=""UTF-8"" standalone=""yes"" ?>
<data>
<error>There was a error updating the employee, extension is in use by Desmond Mason.
Please call the help desk at x555.</error>
</data>

In this case our script would call the ShowMessage function with the error Boolean value set to true. The resulting page would look something like Figure 3.

Coupling with Client-Side and Template Error Checking
To make the messaging system complete we have to integrate traditional ColdFusion error checking as well as client-side error checking.

Let's look at how to integrate traditional ColdFusion error handling into our messaging system first. We'll start by creating two session variables: one to hold a Boolean value to determine if an error has occurred and a second one that will be a string to hold the error message that we're going to return to the visitor. For this example I'll name them session.error and session.errorMessage. The next step is to wrap all your ColdFusion logic in the <cftry> and <cfcatch> statements. In your <cfcatch> statement you'll set the session.error to true and the session.errorMessage equal to the cfcatch.Message.

try
{
Department = CreateObject("Component","CFDJ.Components.Department");
DepartmentArray = Department.GetAllDepartments(#session.dsn#);
}
catch(Any ex)
{
      session.error = true;
      session.errorMessage = ex.Message;
}

Finally we'll have to add some logic to control the visibility of our message area. If the session.error message is false the display area is created exactly as before. However, if an error is found we'll set the default style of the message area to "error" and display the error message:

<cfif NOT session.error>
     <span id="message" name="message" class="hidden"></span>
<cfelse>
<span id="message" name="message" class="error">#session.errorMessage#</span>
     <cfset session.error = false>
</cfif>