This weekend I wrote up a quick blog post that demonstrated using jQuery and jQuery UI for front end editing of database content. ColdFusion was used to store changes made via a jQuery dialog and jQuery did all the handling of data back and forth. Alex asked if it was possible to demonstrate the code using a table instead of the lovely green divs I had created. Here is what I came up with. I'm going to focus on the changes so please be sure to read the previous entry for details on how this all works together. Ok, so first, the template.
<html> <head> <script src="jquery-ui-1.8.7.custom/js/jquery-1.4.4.min.js"></script> <script src="jquery-ui-1.8.7.custom/js/jquery-ui-1.8.7.custom.min.js"></script> <link rel="stylesheet" href="jquery-ui-1.8.7.custom/css/overcast/jquery-ui-1.8.7.custom.css" /> <script> //credit: http://www.mredkj.com/javascript/numberFormat.html function dollarFormat(nStr){ nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return "$" + x1 + x2; } $(document).ready(function() { $(".editLink").click(function(e) { var initialRow = $(this).parent().parent(); //based on which we click, get the current values var artid = $(initialRow).data("artid"); var name = $("td:first", initialRow).text(); var price = $("td:nth-child(2)", initialRow).data("price"); console.log(price); var desc = $("td:nth-child(3)", initialRow).text(); desc = $.trim(desc); $("#artid").val(artid); $("#namefield").val(name); $("#pricefield").val(price); $("#descriptionfield").val(desc); $("#editForm").dialog({ buttons: { "Save": function() { var thisDialog = $(this); $.post("artservice.cfc?method=saveart", { id:$("#artid").val(), name:$("#namefield").val(), price:$("#pricefield").val(), description:$("#descriptionfield").val() }, function() { //update the initial div $("td:first", initialRow).text($("#namefield").val()); var price = $("#pricefield").val(); $("td:nth-child(2)", initialRow).data("price", price); price = parseInt(price).toFixed(2); $("td:nth-child(2)", initialRow).text("Price: "+dollarFormat(price)); $("td:nth-child(3)", initialRow).text($("#descriptionfield").val()); $(thisDialog).dialog("close"); }); } } }); e.preventDefault(); }); }); </script> <style> .artdiv { padding: 5px; margin: 5px; background-color: #80ff80; } #editForm { display:none; } </style> </head> <body> <table width="100%" border="1"> <tr> <th>Name</th> <th>Price</th> <th>Description</th> <th> </th> </tr> <cfoutput query="getart"> <tr data-artid="#artid#"> <td>#artname#</td> <td data-price="#price#"> Price: #dollarFormat(price)# </td> <td class="description"> #description# </td> <td><a class="editLink" href="">Edit</a></td> </tr> </cfoutput> </table> <div id="editForm" title="Edit Art"> <input type="hidden" id="artid"> <p> <b>Name:</b><br/> <input type="text" id="namefield"> </p> <p> <b>Price:</b><br/> <input type="text" id="pricefield"> </p> <p> <b>Description:</b><br/> <textarea id="descriptionfield"></textarea> </p> </div> </body> </html><cfset getArt = new artservice().getArt()>
So the first obvious change is the display at the bottom. Instead of a list of DIVs I output table rows. That's a pretty simple change. I also added an edit link as the fourth column in the table.
Now go back up to the document ready block. I'm now listening for clicks to my new edit link. Note that at the very end I now use e.preventDefault() to block the browser from actually trying to do something with the link. The only other change then is to how I get the various values. Notice I get the table row by using parent.parent on my link. Once I have that, I use a combination of td:first and td:nth-child calls to get at my various items. Outside of that though nothing much else has changed. If you want to run this, please download the attachment from the previous entry and just copy the code above into a new table. Hope this helps!