PageRenderTime 6ms CodeModel.GetById 1ms app.highlight 2ms RepoModel.GetById 1ms app.codeStats 0ms

/examples/consumer/index.cfm

http://github.com/atuttle/Taffy
ColdFusion | 325 lines | 302 code | 23 blank | 0 comment | 3 complexity | 809e4db1624cca3b0ca97e51edde13ef MD5 | raw file
  1<html>
  2<head>
  3	<title>Example REST Consumer Application</title>
  4	<style>
  5		a.delete, a.update {
  6			color: blue;
  7			text-decoration: underline;
  8			cursor: pointer;
  9		}
 10		#add, #update { display: none; }
 11		#artists td {
 12			padding: 4px;
 13		}
 14	</style>
 15</head>
 16<body id="top">
 17
 18	<h2>Artists</h2>
 19
 20	<p>This is <em><strong>not</strong></em> a shining example of how to write an ajax-based web application;
 21	it is strictly intended to demonstrate the use of each of the 4 http verbs with a Taffy API.</p>
 22
 23	<a href="#new" id="new">Add New Artist</a><br/>
 24	<form action="/taffy/examples/api/index.cfm/artists" method="post" id="add">
 25		First Name: <input type="text" name="firstname" /><br/>
 26		Last Name: <input type="text" name="lastname" /><br/>
 27		Address: <input type="text" name="address" /><br/>
 28		City: <input type="text" name="city" /><br/>
 29		State: <input type="text" name="state" /><br/>
 30		Postal Code: <input type="text" name="postalcode" /><br/>
 31		Email: <input type="text" name="email" /><br/>
 32		Phone: <input type="text" name="phone" /><br/>
 33		Fax: <input type="text" name="fax" /><br/>
 34		Password: <input type="text" name="thepassword" /><br/>
 35		<input type="submit" value="Add Artist" />
 36		<input type="reset" value="Cancel" id="addCancel" />
 37	</form>
 38	<form action="/taffy/examples/api/index.cfm/artist" method="put" id="update">
 39		First Name: <input type="text" name="firstname" /><br/>
 40		Last Name: <input type="text" name="lastname" /><br/>
 41		Address: <input type="text" name="address" /><br/>
 42		City: <input type="text" name="city" /><br/>
 43		State: <input type="text" name="state" /><br/>
 44		Postal Code: <input type="text" name="postalcode" /><br/>
 45		Email: <input type="text" name="email" /><br/>
 46		Phone: <input type="text" name="phone" /><br/>
 47		Fax: <input type="text" name="fax" /><br/>
 48		Password: <input type="text" name="thepassword" /><br/>
 49		<input type="hidden" name="debug" value="true" />
 50		<input type="submit" value="Update Artist" />
 51		<input type="reset" value="Cancel" id="updateCancel" />
 52	</form>
 53	<table id="artists">
 54		<tr>
 55			<th>ID</th>
 56			<th>First Name</th>
 57			<th>Last Name</th>
 58			<th>Address</th>
 59			<th>City</th>
 60			<th>State</th>
 61			<th>Postal Code</th>
 62			<th>Email</th>
 63			<th>Phone</th>
 64			<th>Fax</th>
 65			<th>Password</th>
 66			<th> </th>
 67		</tr>
 68	</table>
 69	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 70	<cfoutput>
 71    	<script type="text/javascript">
 72
 73			var apiBaseURI = "#application.wsLoc#";
 74
 75			$(document).ready(function(){
 76
 77
 78				/* ************* */
 79				/* LINK HANDLERS */
 80				/* ************* */
 81
 82				//delete-link handler
 83				$("##artists .delete").live('click', function(){
 84					deleteRow($(this).parent().parent().attr('id'));
 85				});
 86				//update-link handler
 87				$("##artists .update").live('click', function(){
 88					updateRow($(this).parent().parent().attr('id'));
 89				});
 90
 91				//new-record-link handler
 92				$("##new").click(function(){
 93					$("##add").show("slow");
 94				});
 95
 96				$("##updateCancel").click(function(){
 97					$("##update").hide("slow");
 98				});
 99
100				$("##addCancel").click(function(){
101					$("##add").hide("slow");
102				});
103
104				/* ************* */
105				/* FORM HANDLERS */
106				/* ************* */
107
108				//add-form handler
109				submitFrmViaAjax(
110					$("##add"),
111					function (data, textStatus, xhr){
112						console.log(data);
113						$("##add").hide();
114						reloadData();
115					},
116					function (xhr, textStatus, err){
117						console.log(textStatus);
118						console.log(err);
119					}
120				);
121				/*
122				$("##add").submit(function(e){
123					e.preventDefault();
124					var frm = $(this);
125					$.ajax({
126						url: frm.attr('action'),
127						data:{
128							firstname: $("##add input[name=firstname]").val(),
129							lastname: $("##add input[name=lastname]").val(),
130							address: $("##add input[name=address]").val(),
131							city: $("##add input[name=city]").val(),
132							state: $("##add input[name=state]").val(),
133							postalcode: $("##add input[name=postalcode]").val(),
134							email: $("##add input[name=email]").val(),
135							phone: $("##add input[name=phone]").val(),
136							fax: $("##add input[name=fax]").val(),
137							thepassword: $("##add input[name=thepassword]").val()
138						},
139						type: frm.attr('method'),
140						dataType: "json",
141						contentType: "application/json",
142						success: function (data, textStatus, xhr){
143							console.log(data);
144						},
145						error: function (xhr, textStatus, err){
146							console.log(textStatus);
147							console.log(err);
148						}
149					});
150				});
151				*/
152
153				//update-form handler
154				submitFrmViaAjax(
155					$("##update"),
156					function (data, textStatus, xhr){
157						console.log(data);
158						$("##update").hide();
159						reloadData();
160					},
161					function (xhr, textStatus, err){
162						console.log(textStatus);
163						console.log(err);
164					}
165				);
166				/*
167				$("##update").submit(function(e){
168					e.preventDefault();
169					var frm = $(this);
170					$.ajax({
171						url: frm.attr('action'),
172						data: {
173							firstname: $("##update input[name=firstname]").val(),
174				            lastname: $("##update input[name=lastname]").val(),
175				            address: $("##update input[name=address]").val(),
176				            city: $("##update input[name=city]").val(),
177				            state: $("##update input[name=state]").val(),
178				            postalcode: $("##update input[name=postalcode]").val(),
179				            email: $("##update input[name=email]").val(),
180				            phone: $("##update input[name=phone]").val(),
181				            fax: $("##update input[name=fax]").val(),
182				            thepassword: $("##update input[name=thepassword]").val()
183						},
184						type: frm.attr('method'),
185						dataType: "json",
186						success: function (data, textStatus, xhr){
187							console.log(data);
188							$("##update").hide();
189							reloadData();
190						},
191						error: function (xhr, textStatus, err){
192							console.log(textStatus);
193							console.log(err);
194						}
195					});
196				});
197				*/
198
199				/* ********* */
200				/* LOAD DATA */
201				/* ********* */
202				reloadData();
203
204			});
205
206			/* ************** */
207			/* INTERNAL FUNCS */
208			/* ************** */
209
210			function reloadData(){
211				//remove existing data
212				$("##artists .dyn").remove();
213				//load table data
214				$.ajax({
215					url: apiBaseURI + "/artists",
216					type: "get",
217					dataType: "json",
218					success: function(data, textStatus, xhr){
219						var rowNum = 0;
220						if (data != null) for (rowNum = 0; rowNum < data.DATA.length; rowNum++){
221							addRow(
222								"##artists",
223								data.DATA[rowNum][0],
224								data.DATA[rowNum][1],
225								data.DATA[rowNum][2],
226								data.DATA[rowNum][3],
227								data.DATA[rowNum][4],
228								data.DATA[rowNum][5],
229								data.DATA[rowNum][6],
230								data.DATA[rowNum][7],
231								data.DATA[rowNum][8],
232								data.DATA[rowNum][9],
233								data.DATA[rowNum][10]
234							);
235						}
236					},
237					error: function(xhr, textStatus, err){
238						alert(err & "\n\n" & textStatus);
239					}
240				});
241			}
242
243			function deleteRow(rowId){
244				//hide the row
245				$("##" + rowId).hide();
246				//try to delete the record
247				$.ajax({
248					url: apiBaseURI + "/artist/" + rowId,
249					type: "delete",
250
251					//if delete successful, remove the row
252					success: function(){
253						$(rowId).remove();
254						alert("row deleted!");
255					},
256
257					//if delete failed, show the row and alert a message
258					error: function(){
259						$("##" + rowId).show();
260						alert("Unable to delete record!");
261					}
262				});
263			}
264			function addRow(tableId, a, b, c, d, e, f, g, h, i, j, k){
265				var row = $("<tr class='dyn' id='" + a + "'>"
266							+ "<td>" + a + "</td>"
267							+ "<td>" + b + "</td>"
268							+ "<td>" + c + "</td>"
269							+ "<td>" + d + "</td>"
270							+ "<td>" + e + "</td>"
271							+ "<td>" + f + "</td>"
272							+ "<td>" + g + "</td>"
273							+ "<td>" + h + "</td>"
274							+ "<td>" + i + "</td>"
275							+ "<td>" + j + "</td>"
276							+ "<td>" + k + "</td>"
277							+ "<td><a class='delete' href='##delete'>del</a> - <a href='##update' class='update'>upd</a></td>"
278							+ "</tr>");
279				$(tableId).append(row);
280			}
281			function updateRow(recordId){
282				$.ajax({
283					url: apiBaseURI + "/artist/" + recordId,
284					type: "get",
285
286					//if we can get the current status of the record then show the update form
287					success: function(data, textStatus, xhr){
288						console.log(data.DATA);
289						$("##update").attr('action', apiBaseURI + "/artist/" + recordId);
290						$("##update input[name='firstname']").val(data.DATA[0][1]);
291						$("##update input[name='lastname']").val(data.DATA[0][2]);
292						$("##update input[name='address']").val(data.DATA[0][3]);
293						$("##update input[name='city']").val(data.DATA[0][4]);
294						$("##update input[name='state']").val(data.DATA[0][5]);
295						$("##update input[name='postalcode']").val(data.DATA[0][6]);
296						$("##update input[name='email']").val(data.DATA[0][7]);
297						$("##update input[name='phone']").val(data.DATA[0][8]);
298						$("##update input[name='fax']").val(data.DATA[0][9]);
299						$("##update input[name='thepassword']").val(data.DATA[0][10]);
300						$("##update").show("slow");
301					},
302
303					//otherwise, show an error
304					error: function(){
305						alert('unable to get current status of record, sorry!');
306					}
307				});
308			}
309			function submitFrmViaAjax(frm, successCallback, errorCallback){
310				frm.submit(function(e){
311					e.preventDefault();
312					var frm = $(this);
313					$.ajax({
314						url: frm.attr('action'),
315						data: frm.serialize(),
316						type: frm.attr('method'),
317						success: successCallback,
318						error: errorCallback
319					});
320				});
321			}
322		</script>
323    </cfoutput>
324</body>
325</html>