I have a table that displays query data in the table cells. The cells are
editable and save once I click off the cells. What I cannot figure out is how
to post the data to the database so the changes actually apply.
The table and data:
<table id="storeDetails">
<thead>
<tr>
<th>Store ##: </th>
<td class="editable"
id="store">#store#</td>
</tr>
<cfquery name="getAddress" datasource="#myDsn#">
select distinct
pdl3.n301_AddressInformation
as 'address1'
, pdl3.n302_AddressInformation
as 'address2'
from
850_poDetailLocN3 pdl3
where
pdl3.podetaillocid = <cfqueryparam
cfsqltype="cf_sql_varchar" value="#get850Details.locid#">
</cfquery>
<cfloop query="getAddress">
<tr>
<th>Address: </th>
<td class="editable" id="address1">#address1#</td>
</tr>
<cfif isDefined(getAddress.address2) and getAddress.address2
NEQ ''>
<tr>
<th>Address 2: </th>
<td class="editable" id="address2">#address2#</td>
</tr>
</cfif>
</cfloop>
<tr>
<th>City: </th>
<td class="editable" id="storeCity">#storeCity#</td>
</tr>
<tr>
<th>State: </th>
<td class="editable" id="storeState">#storeState#</td>
</tr>
<tr>
<th>Zip Code: </th>
<td class="editable" id="storeZip">#storeZip#</td>
</tr>
</thead>
</table>
<cfset phone = rereplace(contactNumber, "/", "", "all")>
<cfscript>
areacode = left(phone, 3);
prefix = mid(phone, 4, 3);
lineNumber = right(phone, 4);
</cfscript>
<h3>Store Contact</h3>
<table id="contactDetails">
<thead>
<tr>
<th>Name: </th>
<td class="editable"
id="contactName">#contactName#</td>
</tr>
<tr>
<th>Phone: </th>
<td class="editable" id="contactPhone">(#areaCode#)
#prefix#-#lineNumber#</td>
</tr>
</thead>
</table>
<h3>Order Details</h3>
<table id="part" name="part">
<thead>
<tr>
<th>Line</th>
<th>Part Number</th>
<th>Part Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Extended Price</th>
<th>Accept</th>
<th> </th>
<th> </th>
</tr>
</thead>
<!---nested output to loop through all po detail lines for each
store--->
<cfoutput>
<cfquery name="validatePrattPart" datasource="myDsn">
select partnum
from parts with(nolock)
where partnum = <cfqueryparam cfsqltype="cf_sql_varchar"
value="#get850Details.PartNumber#-CUST">
</cfquery>
<cfquery name="validatePart" datasource="myDsn2">
select shortchar08
from part with(nolock)
where company = 'PC68300'
and shortchar08 = <cfqueryparam cfsqltype="cf_sql_varchar"
value="#get850Details.PartNumber#">
</cfquery>
<tbody>
<cfif validatePart.recordCount NEQ 1 or
validatePart.recordCount NEQ 1>
<tr bgcolor="##CD2626">
<cfelse>
<tr bgcolor="##e8edff">
</cfif>
<td>#currentrow#</td>
<cfif len(trim(PartNumber))><td class="editable"
id="PartNumber">#PartNumber#</td><cfelse><td class="editable"
id="PartNumber">Not Provided</td></cfif>
<cfif len(trim(PartNumber))><td class="editable"
id="PartNumber">#PartNumber#-CUST</td><cfelse><td class="editable"
id="PartNumber">Not Provided</td></cfif>
<td>#partdescription#</td>
<td>#quantity#</td>
<td class="editable" id="price">#price#</td>
<td>#price * quantity#</td>
<td><input type="radio"
name="accept_#store#_#partnum#_#poDetailID#" value="1" checked="checked"
/>Yes<input type="radio" name="accept_#store#_#partnum#_#poDetailID#" value="0"
/>No</td>
<td><a class="view-note" isa13="#isa13#" st02="#st02#"
po101="#linenum#" podetailid="#podetailid#"><img
src="/utility/EDI/app/notes/images/notepad2.png" title="Add a New Note"
height="20" align="absmiddle"/></a></td>
<td><a class="create-note" isa13="#isa13#" st02="#st02#"
po101="#linenum#" podetailid="#podetailid#"><img
src="/utility/EDI/app/notes/images/edit-notes.png" title="Add a New Note"
height="20" align="absmiddle"/></a></td>
<cfif validatePart.recordCount NEQ 1>
<td>part not found!</td>
<cfelseif validatePart.recordCount NEQ 1>
<td>part not found!</td>
</cfif>
<td style="display:none;" id="#isa13#"
name="interchangeControlNumber">#isa13#</td>
<td style="display:none;" id="#st02#"
name="TransactionSetControlNumber">#st02#</td>
<td style="display:none;" id="#podetailID#"
name="podetailID">#podetailID#</td>
</tr>
</cfoutput>
</tbody>
</table>
The jQuery:
<script>
$(document).ready(function(){
$('.editable, .editable-area')
.hover(function() {
$(this).toggleClass('over-inline');
})
.click(function(e) {
// start the inline editing
var $editable = $(this);
if($editable.hasClass('active-inline')) {
return;
}
var contents = $.trim($editable.html());
$editable
.addClass('active-inline')
.empty();
// Determine what kind of form element we need
var editElement = $editable.hasClass('editable') ?
'<input type="text" />' : '<textarea></textarea>';
// Replace the target with the form element
$(editElement)
.val(contents)
.appendTo($editable)
.focus()
.blur(function(e) {
$editable.trigger('blur');
});
})
.blur(function(e) {
// end the inline editing
var $editable = $(this);
var contents = $editable.find(':first-child:input').val();
$editable.contents().replaceWith('<em class="ajax">Saving ... </em>');
// post the new value to the server along with its ID
$.post('update.cfm',
{id: $editable.attr('id'), value: contents},
function(data) {
$editable
.removeClass('active-inline')
.contents()
.replaceWith(contents);
});
});
});
As is, this is working how I wish, but I do not understand how to reference the
data in the update.cfm update query.
Thank you.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-newbie/message.cfm/messageid:5902
Subscription: http://www.houseoffusion.com/groups/cf-newbie/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-newbie/unsubscribe.cfm
