Page 2 of 2   « previous page

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>

Now let's say that the connection to the database was down when the user first entered the application. The function in Listing 1 is used to get a list of all the departments in the company.

If the database server is down the cfcatch will catch a database error and throw a new error message that will tell the user that the database server is down, it's up to the page that calls this function to trap the error and set the session.error and session.errorMessage variables:

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

In this case the employee update page would look like Figure 4 when the user enters the application.

Next let's look at using JavaScript to do some simple client-side error handling. The first step is to check for invalid data. I'll assume that you've had some experience doing simple JavaScript error checking and skip right to displaying the error. For our example, we're going to have the JavaScript check to make sure that the user has selected the name of a user to edit from the user drop-down. The first step would be to make sure that the selected index of a drop-down is not zero. Typically the next step would be to display some sort of message to the user with the Alert() function. In this case we'll simply call the ShowError() function that we wrote above:

if(departmentSelect.selectedIndex != 0)
{
    //do something
}
else
{
    ShowMessage('Please select an employee to update',true);
}

Conclusion
Adding a messaging system to an AJAX application isn't very complicated, but it can be an extremely useful technique for keeping your end users informed. This application can be viewed online at www.innovacreative.com/cfdj/ajax. The source code can be downloaded from www.innovacrative.com/cfdj/ajax/ajax.zip.

Page 2 of 2   « previous page