CODEWITHSUNDEEP
jquerycoldfusion
Brian Fleishman
Brian Fleishman

Reputation: 1257

JQuery Submit To ColdFusion ActionPage

I have an HTML FORM element that is dynamically created from a CFLOOP tag. Each form is unique and has a submit button that fires a Jquery script that posts to an actionpage. There is a hidden form field which is assigned a unique record ID that the actionpage uses to execute the delete query.

I am recieving this error message in my browser's console window: 500 (Invalid data 528,529 for CFSQLTYPE CF_SQL_INTEGER.)

Those are the unique record ID's that are assigned to my form's hidden input when my CFLOOP is run. My cloop is currently generating 2 unique forms and with hidden field values: "528,529" respectively.

If I happen to only have one unique form on this page, everything works fine. Why is the Jquery sending over all the values of the hidden fields? How can I fix?

Thanks. -Brian

The FORM code looks like this:

<cfloop query="get_trips">

                <tr class="vehicle-log-table">
                  <td class="vehicle-log-table">#DateFormat(get_trips._date, "mm-dd-yyyy")#</td>
                  <td class="vehicle-log-table"><div align="center">#get_trips.total_mileage#</div></td>
                  <td class="vehicle-log-table"><div align="center">#get_trips.expenses#</div></td>
                  <td class="vehicle-log-table"><div align="right"> 
                  <a href="actionpages/delete_trip.cfm?id=#id#">Delete Trip</a>
                  <form  enctype="multipart/form-data" class="deleteMileageForm" id="deleteMileage#get_trips.currentRow#" method="post">

                  <input type="hidden" id="hidden" name="hidden" value="#id#">
                  <input class="vehicle-log-form" type="submit" id="submit2" name="submi2" value="Delete">
                  </form>           
                 </div><br />

                <span class="errorTab2" style="display:none"> <font color="##FF0000"> <strong>Trip Not Deleted</strong></font></span>
                <span class="successTab2" style="display:none"> <font color="##00FF00"> <strong>Trip Deleted Successfully</strong></font></span>  </td>

                </td>
                </tr>

                </cfloop>

My Javascript Code

$('#delete a[href]').click(function(e) { e.preventDefault(); });

      $('.deleteMileageForm').submit(function (e) 
      {          

        e.preventDefault();
        $.ajax({
        data: $('.deleteMileageForm').serialize(),
        type:'POST',
        url:'actionpages/delete_trip.cfm',
        success: function(){
        $('.successTab2').fadeIn(200).show();
        $('.errorTab2').fadeOut(200).hide();
            }

        });
    });

My CF Query:

<!---Delete Trip --->                          
    <cfoutput>
    <cfquery name="deleteTrips" datasource="#datasource#">
    delete from vehicle_log
    where ID = <cfqueryparam value="#form.hidden#" cfsqltype="CF_SQL_INTEGER">
    </cfquery>
    </cfoutput>

Upvotes: 1

Views: 152

Answers (1)

Kevin B
Kevin B

Reputation: 95031

Instead of serializing all forms, serialize the one that was submitted.

$('#delete a[href]').click(function (e) {
    e.preventDefault();
});

$('.deleteMileageForm').submit(function (e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax({
        data: $this.serialize(), // **** modified this line ****
        type: 'POST',
        url: 'actionpages/delete_trip.cfm',
        success: function () {
            var $row = $this.closest('tr');
            $('.successTab2', $row).fadeIn(200).show();
            $('.errorTab2', $row).fadeOut(200).hide();
        }
    });
});

Upvotes: 3

Related Questions