index.cfm - This ColdFusion code generates a dynamic HTML t…

/examples/consumer/index.cfm

http://github.com/atuttle/Taffy · ColdFusion · 325 lines · 302 code · 23 blank · 0 comment · 3 complexity · ee1c30526ca9c7fc575eb5559872c42d MD5 · raw file


<html>
<head>
	<title>Example REST Consumer Application</title>
	<style>
		a.delete, a.update {
			color: blue;
			text-decoration: underline;
			cursor: pointer;
		}
		#add, #update { display: none; }
		#artists td {
			padding: 4px;
		}
	</style>
</head>
<body id="top">

	<h2>Artists</h2>

	<p>This is <em><strong>not</strong></em> a shining example of how to write an ajax-based web application;
	it is strictly intended to demonstrate the use of each of the 4 http verbs with a Taffy API.</p>

	<a href="#new" id="new">Add New Artist</a><br/>
	<form action="/taffy/examples/api/index.cfm/artists" method="post" id="add">
		First Name: <input type="text" name="firstname" /><br/>
		Last Name: <input type="text" name="lastname" /><br/>
		Address: <input type="text" name="address" /><br/>
		City: <input type="text" name="city" /><br/>
		State: <input type="text" name="state" /><br/>
		Postal Code: <input type="text" name="postalcode" /><br/>
		Email: <input type="text" name="email" /><br/>
		Phone: <input type="text" name="phone" /><br/>
		Fax: <input type="text" name="fax" /><br/>
		Password: <input type="text" name="thepassword" /><br/>
		<input type="submit" value="Add Artist" />
		<input type="reset" value="Cancel" id="addCancel" />
	</form>
	<form action="/taffy/examples/api/index.cfm/artist" method="put" id="update">
		First Name: <input type="text" name="firstname" /><br/>
		Last Name: <input type="text" name="lastname" /><br/>
		Address: <input type="text" name="address" /><br/>
		City: <input type="text" name="city" /><br/>
		State: <input type="text" name="state" /><br/>
		Postal Code: <input type="text" name="postalcode" /><br/>
		Email: <input type="text" name="email" /><br/>
		Phone: <input type="text" name="phone" /><br/>
		Fax: <input type="text" name="fax" /><br/>
		Password: <input type="text" name="thepassword" /><br/>
		<input type="hidden" name="debug" value="true" />
		<input type="submit" value="Update Artist" />
		<input type="reset" value="Cancel" id="updateCancel" />
	</form>
	<table id="artists">
		<tr>
			<th>ID</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Address</th>
			<th>City</th>
			<th>State</th>
			<th>Postal Code</th>
			<th>Email</th>
			<th>Phone</th>
			<th>Fax</th>
			<th>Password</th>
			<th> </th>
		</tr>
	</table>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<cfoutput>
    	<script type="text/javascript">

			var apiBaseURI = "#application.wsLoc#";

			$(document).ready(function(){


				/* ************* */
				/* LINK HANDLERS */
				/* ************* */

				//delete-link handler
				$("##artists .delete").live('click', function(){
					deleteRow($(this).parent().parent().attr('id'));
				});
				//update-link handler
				$("##artists .update").live('click', function(){
					updateRow($(this).parent().parent().attr('id'));
				});

				//new-record-link handler
				$("##new").click(function(){
					$("##add").show("slow");
				});

				$("##updateCancel").click(function(){
					$("##update").hide("slow");
				});

				$("##addCancel").click(function(){
					$("##add").hide("slow");
				});

				/* ************* */
				/* FORM HANDLERS */
				/* ************* */

				//add-form handler
				submitFrmViaAjax(
					$("##add"),
					function (data, textStatus, xhr){
						console.log(data);
						$("##add").hide();
						reloadData();
					},
					function (xhr, textStatus, err){
						console.log(textStatus);
						console.log(err);
					}
				);
				/*
				$("##add").submit(function(e){
					e.preventDefault();
					var frm = $(this);
					$.ajax({
						url: frm.attr('action'),
						data:{
							firstname: $("##add input[name=firstname]").val(),
							lastname: $("##add input[name=lastname]").val(),
							address: $("##add input[name=address]").val(),
							city: $("##add input[name=city]").val(),
							state: $("##add input[name=state]").val(),
							postalcode: $("##add input[name=postalcode]").val(),
							email: $("##add input[name=email]").val(),
							phone: $("##add input[name=phone]").val(),
							fax: $("##add input[name=fax]").val(),
							thepassword: $("##add input[name=thepassword]").val()
						},
						type: frm.attr('method'),
						dataType: "json",
						contentType: "application/json",
						success: function (data, textStatus, xhr){
							console.log(data);
						},
						error: function (xhr, textStatus, err){
							console.log(textStatus);
							console.log(err);
						}
					});
				});
				*/

				//update-form handler
				submitFrmViaAjax(
					$("##update"),
					function (data, textStatus, xhr){
						console.log(data);
						$("##update").hide();
						reloadData();
					},
					function (xhr, textStatus, err){
						console.log(textStatus);
						console.log(err);
					}
				);
				/*
				$("##update").submit(function(e){
					e.preventDefault();
					var frm = $(this);
					$.ajax({
						url: frm.attr('action'),
						data: {
							firstname: $("##update input[name=firstname]").val(),
				            lastname: $("##update input[name=lastname]").val(),
				            address: $("##update input[name=address]").val(),
				            city: $("##update input[name=city]").val(),
				            state: $("##update input[name=state]").val(),
				            postalcode: $("##update input[name=postalcode]").val(),
				            email: $("##update input[name=email]").val(),
				            phone: $("##update input[name=phone]").val(),
				            fax: $("##update input[name=fax]").val(),
				            thepassword: $("##update input[name=thepassword]").val()
						},
						type: frm.attr('method'),
						dataType: "json",
						success: function (data, textStatus, xhr){
							console.log(data);
							$("##update").hide();
							reloadData();
						},
						error: function (xhr, textStatus, err){
							console.log(textStatus);
							console.log(err);
						}
					});
				});
				*/

				/* ********* */
				/* LOAD DATA */
				/* ********* */
				reloadData();

			});

			/* ************** */
			/* INTERNAL FUNCS */
			/* ************** */

			function reloadData(){
				//remove existing data
				$("##artists .dyn").remove();
				//load table data
				$.ajax({
					url: apiBaseURI + "/artists",
					type: "get",
					dataType: "json",
					success: function(data, textStatus, xhr){
						var rowNum = 0;
						if (data != null) for (rowNum = 0; rowNum < data.DATA.length; rowNum++){
							addRow(
								"##artists",
								data.DATA[rowNum][0],
								data.DATA[rowNum][1],
								data.DATA[rowNum][2],
								data.DATA[rowNum][3],
								data.DATA[rowNum][4],
								data.DATA[rowNum][5],
								data.DATA[rowNum][6],
								data.DATA[rowNum][7],
								data.DATA[rowNum][8],
								data.DATA[rowNum][9],
								data.DATA[rowNum][10]
							);
						}
					},
					error: function(xhr, textStatus, err){
						alert(err & "\n\n" & textStatus);
					}
				});
			}

			function deleteRow(rowId){
				//hide the row
				$("##" + rowId).hide();
				//try to delete the record
				$.ajax({
					url: apiBaseURI + "/artist/" + rowId,
					type: "delete",

					//if delete successful, remove the row
					success: function(){
						$(rowId).remove();
						alert("row deleted!");
					},

					//if delete failed, show the row and alert a message
					error: function(){
						$("##" + rowId).show();
						alert("Unable to delete record!");
					}
				});
			}
			function addRow(tableId, a, b, c, d, e, f, g, h, i, j, k){
				var row = $("<tr class='dyn' id='" + a + "'>"
							+ "<td>" + a + "</td>"
							+ "<td>" + b + "</td>"
							+ "<td>" + c + "</td>"
							+ "<td>" + d + "</td>"
							+ "<td>" + e + "</td>"
							+ "<td>" + f + "</td>"
							+ "<td>" + g + "</td>"
							+ "<td>" + h + "</td>"
							+ "<td>" + i + "</td>"
							+ "<td>" + j + "</td>"
							+ "<td>" + k + "</td>"
							+ "<td><a class='delete' href='##delete'>del</a> - <a href='##update' class='update'>upd</a></td>"
							+ "</tr>");
				$(tableId).append(row);
			}
			function updateRow(recordId){
				$.ajax({
					url: apiBaseURI + "/artist/" + recordId,
					type: "get",

					//if we can get the current status of the record then show the update form
					success: function(data, textStatus, xhr){
						console.log(data.DATA);
						$("##update").attr('action', apiBaseURI + "/artist/" + recordId);
						$("##update input[name='firstname']").val(data.DATA[0][1]);
						$("##update input[name='lastname']").val(data.DATA[0][2]);
						$("##update input[name='address']").val(data.DATA[0][3]);
						$("##update input[name='city']").val(data.DATA[0][4]);
						$("##update input[name='state']").val(data.DATA[0][5]);
						$("##update input[name='postalcode']").val(data.DATA[0][6]);
						$("##update input[name='email']").val(data.DATA[0][7]);
						$("##update input[name='phone']").val(data.DATA[0][8]);
						$("##update input[name='fax']").val(data.DATA[0][9]);
						$("##update input[name='thepassword']").val(data.DATA[0][10]);
						$("##update").show("slow");
					},

					//otherwise, show an error
					error: function(){
						alert('unable to get current status of record, sorry!');
					}
				});
			}
			function submitFrmViaAjax(frm, successCallback, errorCallback){
				frm.submit(function(e){
					e.preventDefault();
					var frm = $(this);
					$.ajax({
						url: frm.attr('action'),
						data: frm.serialize(),
						type: frm.attr('method'),
						success: successCallback,
						error: errorCallback
					});
				});
			}
		</script>
    </cfoutput>
</body>
</html>

Summary ✨

This ColdFusion code generates a dynamic HTML table that displays data from a database, allowing users to add, edit, and delete records. It uses AJAX requests to interact with the server-side application, updating the table in real-time without requiring a full page reload. The code also includes forms for adding new records and editing existing ones, with validation and error handling built-in.

Alerts (1)

Complexity hotspot; line 220 (total complexity: 3)
220