In this table, there is a column that allows users to select a predicted time.
<cfoutput query="getReservations">
<tbody>
<td><input class="form-control predicted" name="predicted" id="ReservaTempoPrevisto" placeholder="HH:MM" value="#timeFormat(ReservaTempoPrevisto,'HH:mm')#">
<input type="hidden" name="id" class="id" value="#ReservaID#"></td>
Next, the JavaScript code is used to capture the user's selected time and record ID:
//Update the predicted time
$(document).ready(function() {
$(".predicted").on("change",function(event){
var hora = this.value;
console.log("Updating time = "+ hora);
var id = jQuery('input[type=hidden][name=id]').val();
console.log(id);
$.ajax({
url: "horaPrevista-update-database.cfc"
, type: "POST"
, dataType: "json"
, data: {"method" : "updatePredicted", "returnFormat": "json", "hora": hora, "id": id}
}).done(function(response) {
console.log("response", response);
}).fail(function(jqXHR, textStatus, errorMessage) {
console.log("errorMessage",errorMessage);
});
});
});
Lastly, the horaPrevista-update-database.cfc component is presented for updating the database:
<cfcomponent>
<cfset variables.dsn = "listareservas">
<cffunction name="updatePredicted" returntype="struct" access="remote">
<cfargument name="hora" type="string" required="true">
<cfargument name="id" type="numeric" required="true">
<cfset local.response = {success=true}>
<cftry>
<cfquery datasource="#variables.dsn#">
UPDATE Reservas
SET ReservaTempoPrevisto = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#arguments.hora#">
WHERE ReservaID = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.id#">
</cfquery>
<cfcatch>
<!--- add handling here... --->
<cfset local.response = {success=false}>
</cfcatch>
</cftry>
<cfreturn local.response>
</cffunction>
If multiple records are present in the table, the issue arises as it always updates the first record. This happens because the hidden field ID retrieved by the JavaScript is consistently that of the initial record. What could be improved in this setup? Thank you.