/examples/consumer/index.cfm

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