Ask Ben: Building An AJAX, jQuery, And ColdFusion Powered Application 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Simple ColdFusion And jQuery AJAX Demo</title>
 
	<!-- Linked files. -->
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="contact_form.js"></script>
	<script type="text/javascript" src="contact_list.js"></script>
</head>
<body>
 
	<h1>
		Simple ColdFusion And jQuery AJAX Demo
	</h1>
 
 
	<h2>
		Contact Form
	</h2>
 
	<form id="contact-form">
 
		<!--- This is the hidden ID of the contact. --->
		<input type="hidden" name="id" value="0" />
 
		<p>
			<label>Name:</label><br />
			<input type="text" name="name" value="" size="40" />
		</p>
 
		<p>
			<label>Hair:</label><br />
			<input type="text" name="hair" value="" size="40" />
		</p>
 
		<p>
			<button type="submit">Save Contact</button>
		</p>
 
	</form>
 
 
	<h2>
		Contact List
	</h2>
 
	<table id="contact-list" cellspacing="2" cellpadding="5" border="1">
	<thead>
		<tr>
			<th>
				Name
			</th>
			<th>
				Hair
			</th>
			<th>
				Actions
			</th>
		</tr>
	</thead>
 
	<!--- Data to be injected here. --->
	<tbody class="table-content" />
 
	<!---
		The following is our DOM template for pulling down
		data and populating the table.
	--->
	<tbody class="dom-template" style="display: none ;">
		<tr>
			<td class="name-column">
				<!-- Name. -->
			</td>
			<td class="hair-column">
				<!-- Hair. -->
			</td>
			<td class="actions-column">
				<!-- Actions. -->
				<a>Delete</a>
			</td>
		</tr>
	</tbody>
	</table>
 
</body>
</html>

For Cut-and-Paste