I have a jQuery tab element with 2 tabs. There is a form on each tab that has its own action page respectively.
I also have JavaScript code that prevents the default of page refresh and posts the data to my action-page.
The second tab on my form has multiple unique form elements that are created by a CFLoop. I use this to delete specific records from the database. But when I submit the form, the query on my action page throws an error. I can see the error in Firebug but not on screen (If anyone knows of a way to see the ColdFusion error code in more detail, that would be helpful):
500 (Error Executing Database Query.)
I pass the record ID along to the query on the actionpage in the form of a hidden form field. Is there a different way that I need to do this with jQuery? Thanks for the help.
Form Code:
<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">
<form class="deleteMileageForm" id="deletemileage#get_trips.currentRow#" method="post">
<input class="vehicle-log-form" type="submit" id="submit2" name="submi2" value="Delete">
<input type="hidden" id="hidden" name="hidden" value="#get_trips.id#">
</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>
</tr>
</cfloop>
jQuery Code:
<script>
$(document).ready(function () {
//Submit form to add record.
$('#addmileage').submit(function (e) {
e.preventDefault();
$.ajax({
data: $('#addmileage').serialize(),
type:'POST',
url:'actionpages/add_trip.cfm?ticketid=<cfoutput>#url.ticketid#</cfoutput>',
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
});
$('.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();
}
});
});
});
</script>
ColdFusion Query
<!---Delete Trip --->
<cfoutput>
<cfquery name="deleteTrips" datasource="#datasource#">
delete from vehicle_log
where ID = #form.hidden#
</cfquery>
</cfoutput>
Can anyone help? much appreciated.
get_trips.current_row
to your ID. You're going to have a bad time when JavaScript IDs aren't unique – Matt Busche