/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>