CODEWITHSUNDEEP
ajaxcoldfusioncfc
Brian Fleishman
Brian Fleishman

Reputation: 1257

Trying to Pass Form Field Values To CFC via AJAX

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>

Upvotes: 0

Views: 504

Answers (2)

Jules
Jules

Reputation: 2019

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>

Upvotes: 1

Tulsa
Tulsa

Reputation: 11

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() + '\' }',

Upvotes: 0

Related Questions