Trying to Pass Form Field Values To CFC via AJAX - ajax

Question

I have two form field:
<cfinput type="text" name="ticket_id" id="ticket_id" value="#get_ticket.ticket_id#" tabindex="1" readonly="readonly" />
<textarea class='expanding' tabindex="0" name="admin_notes" id="admin_notes" cols="100" rows="5">#get_ticket.admin_notes#</textarea>
I am trying to pass the values of those fields to a CFC function when I press this button.
<input type="button" name="addTechNotes" id="addTechNotes" value="Add New Note" />
Here is my AJAX call:
<!---Javascript for adding notes to ticket --->
<script>
$(document).ready(function () {
//Submit form to add record.
$('#addTechNotes').click(function (e)
{
e.preventDefault();
$.ajax({
data: {tech_notes : $("#tech_notes").val(), ticket_id : $("#ticket_id").val() },
type:'POST',
url:'../cfcs/add_ticket_notes.cfc?method=addNotes',
success: function() {
$("#addNotesMessage").append( "Note successfully entered." );
error: console.log("error");
}
});
});
});
</script>
When I click the botton my browser console logs: error (The error attribute of my AJAX call). What am I missing?
Here is my CFC:
<cffunction name="addNotes" access="remote" returnType="string">
<cfargument name="ticket_id" type="any" required="true">
<cfargument name="tech_notes" type="any" required="yes">
<!--- localize function variables --->
<cfset var dataDetail = "">
<cfoutput>
<cfquery name="dataDetail" datasource="#datasource#">
update closed_tickets
set tech_notes = <cfqueryparam value="#ARGUMENTS.tech_notes#" cfsqltype="cf_sql_varchar">
<!--- adjust cfsqltype if needed --->
WHERE ticket_id = <cfqueryparam value="#ARGUMENTS.ticket_id#" cfsqltype="cf_sql_varchar">
</cfquery>
</cfoutput>
<cfreturn dataDetail>

Answer 1

Your Ajax call was a little broken. Try this:
<script>
$(document).ready(function () {
//Submit form to add record.
$('#addTechNotes').click(function (e) {
e.preventDefault();
$.ajax({
data: {
tech_notes : $("#tech_notes").val(),
ticket_id : $("#ticket_id").val()
},
type:"POST",
url:"../cfcs/add_ticket_notes.cfc?method=addNotes",
success: function() {
$("#addNotesMessage").append( "Note successfully entered." );
}, // CLOSE THE SUCCESS PARAM
// START THE ERROR PARAM
error: function() {
console.log("error");
}
});
});
});
</script>

Answer 2

Your textarea field has a name and id of 'admin_notes' but you're referencing an element with id of 'tech_notes' in the ajax call.
I also prefer to add quotes around my data string
data: '{tech_notes:\'' + $("#tech_notes").val() + '\', ticket_id: \'' + $("#ticket_id").val() + '\' }',