/examples/consumer/index.cfm
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 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="https://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>