Simple AJAX Example Using ColdFusion

Mar

03

As I mentioned in my previous post, I planned on creating a "tutorial that will walk you through a real world working example of AJAX using ColdFusion and a simple MS Access Database." Well, here it is:

In order to represent a working example of AJAX, there are a few things we're going to need.

  • database
  • HTML file
  • JavaScript (located within the HTML file in this example)
  • ColdFusion file (note: any programming language can be used)
  • prototype JavaScript library

The Database

The database used in this example is an extremely basic MS Access database consisting of one table that contains 6 fields:

Table Name:  Employee
Field Name Data Type
EmpID AutoNumber
FirstName Text
LastName Text
JobTitle Text
Phone Text
Fax Text

Now that we know what we are going to be storing, let's take a look at the ".html" file.

HTML File

This file will consist of the form fields needed to populate the database, along with the placeholder we will use to show the information being stored:

<form name="addEmployee">
First Name:<input type="text" name="FirstName" id="FirstName" value="" size="30" />
<br />
Last Name:<input type="text" name="LastName" id="LastName" value="" size="30" />
<br />
Job Title:<input type="text" name="JobTitle" id="JobTitle" value="" size="30" />
<br />
Phone:<input type="text" name="Phone" id="Phone" value="" size="12" />
<br />
Fax:<input type="text" name="Fax" id="Fax" value="" size="12" />
<br />
<input type="button" name="submit" value="save" onclick="insertEmployee();">
</form>
<div id="EmployeeList"></div> //placeholder div

Notice how there is no method or action in the form tag? Both of these will be taken care of by the JavaScript.

Read the rest of this entry »

feedtag thisdigg this

Tricklin On...