如何在 Coldfusion 中的复选框更改时更新数据库？
How to update database when checkbox in Coldfusion changes?
所以我创建了一个 table，其中一列是一个名为 "Arrived" 的复选框，这意味着如果有客户到达，我将选中该复选框并更新我的数据库（MySql) 与当前时间。
我知道我必须使用 jquery 向 Coldfusion 发出 Ajax 请求并更新数据库，但我不知道如何执行此操作。
有人可以给我一个如何做到这一点的小例子吗？
谢谢，
汞
更新
所以我一直在为我的项目做一些事情，但我发现了一个问题。
这是我的 javascript 代码：
$(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);
});
window.location.reload(true);
});
});
这是我的 hC-update-database.cfm:
<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>
我有一个 table 正在被查询填充。
<cfoutput query="getReservations">
<tbody>
<tr>
<td><input class="form-control predicted" name="predicted" id="ReservaHoraPrevisto" placeholder="HH:MM" value="#timeFormat(ReservaTempoPrevisto,'HH:mm')#">
<input type="hidden" name="id" class="id" value="#ReservaID#"></td>
</tr>
</tbody>
例如，如果我的查询 getReservations 有 10 条记录，它将显示 10 个输入。问题是，如果我尝试更改输入，它总是在数据库中更新 table 中显示的第一条记录（它总是将第一条记录值 #ReservaID# 发送到 hC-update-database.cfm ).如何将 2 个值发送到 cfc（输入和 ID）？
尝试这样的事情：
表单模板：
形式-template.cfm
<cfparam name="url.clientid" default="0">
<cfoutput>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("input[type=checkbox][name=arrived]").on('click',function(event){
var currentObj = jQuery(event.currentTarget);
if(currentObj.prop("checked") === true){
var ajaxurl = "ajax-update-database.cfm?clientid=" + jQuery('input[type=hidden][name=clientid]').val();
jQuery.ajax({
url:ajaxurl
})
.done(function(response) {
var obj = JSON.parse(response);
console.log("obj",obj);
})
.fail(function(jqXHR, textStatus, errorMessage) {
console.log("errorMessage",errorMessage);
});
}
});
});
</script>
</head>
<body>
<form>
<label for="arrived">Arrived</label><br />
<input type="checkbox" name="arrived">
<input type="hidden" name="clientid" value="#url.clientid#">
</form>
</body>
</html>
</cfoutput>
Ajax 模板：
ajax-更新-database.cfm
<cfparam name="url.clientid" default="0">
<cfparam name="variables.response" default="#StructNew()#">
<cfset variables.response['error'] = "">
<cfif Val(url.clientid)>
<cftry>
<cfquery datasource="yourDSN">
UPDATE yourDBTable
SET Arrived = <cfqueryparam cfsqltype="cf_sql_tinyint" value="1">, Submission_date = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#Now()#">
WHERE ClientID = <cfqueryparam cfsqltype="cf_sql_integer" value="#url.clientid#">
</cfquery>
<cfcatch>
<cfset variables.response['error'] = "An error occurred whilst trying to update the database">
</cfcatch>
</cftry>
</cfif>
<cfoutput>
#SerializeJSON(variables.response)#
</cfoutput>
no matter which checkbox I check it always updates in the database the first record that shows up in the table
这是因为演示示例在设计时考虑了单个记录。如果您的表单实际处理多条记录，则需要修改 JS 和 CF 代码。
由于您只是将 ID 传递给 CF，因此不需要单独的隐藏字段。只需使用 "ReservaID" 作为复选框值。当复选框状态更改时，使用 "change" 事件更新记录。下面的示例在选中一个框时更新记录。请记住，用户可以取消选中一个框 - 或重新选中它。您需要决定如何在数据库端处理这些事件并相应地修改代码。前任。未勾选时要清空到货日期吗？如果重新检查等，则使用当前日期和时间更新记录...?
请注意，我的偏好是使用 CFC 进行 ajax 调用。 JS代码类似，只是URL和数据参数
不同
<!--- manual query for DEMO --->
<cfset getReservations = queryNew("ReservaID","integer",[[1],[2],[3],[4]])>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".arrived").on("change",function(event){
if (this.checked) {
var reservaID = this.value;
console.log("Updating id = "+ reservaID);
$.ajax({
url: "SomeComponent.cfc"
, type: "POST"
, dataType: "json"
, data: {"method" : "updateArrival", "returnFormat": "json", "id": reservaID}
}).done(function(response) {
console.log("response", response);
}).fail(function(jqXHR, textStatus, errorMessage) {
console.log("errorMessage",errorMessage);
});
}
});
});
</script>
<form>
<cfoutput query="getReservations">
<input type="checkbox" class="arrived" name="arrived" value="#ReservaID#" />
</cfoutput>
</form>
在 CF 端，创建一个接受单个数字 ID 的远程函数。
<cfcomponent>
<cfset variables.dsn = "listareservas">
<cffunction name="updateArrival" returntype="struct" access="remote">
<cfargument name="id" type="numeric" required="true">
<cfset local.response = {success=true}>
<cftry>
<cfquery datasource="#variables.dsn#">
UPDATE Reservas
SET ReservaHoraChegada = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#Now()#">
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>
</cfcomponent>
所以我创建了一个 table，其中一列是一个名为 "Arrived" 的复选框，这意味着如果有客户到达，我将选中该复选框并更新我的数据库（MySql) 与当前时间。 我知道我必须使用 jquery 向 Coldfusion 发出 Ajax 请求并更新数据库，但我不知道如何执行此操作。 有人可以给我一个如何做到这一点的小例子吗？ 谢谢， 汞
更新
所以我一直在为我的项目做一些事情，但我发现了一个问题。
这是我的 javascript 代码：
$(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);
});
window.location.reload(true);
});
});
这是我的 hC-update-database.cfm:
<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>
我有一个 table 正在被查询填充。
<cfoutput query="getReservations">
<tbody>
<tr>
<td><input class="form-control predicted" name="predicted" id="ReservaHoraPrevisto" placeholder="HH:MM" value="#timeFormat(ReservaTempoPrevisto,'HH:mm')#">
<input type="hidden" name="id" class="id" value="#ReservaID#"></td>
</tr>
</tbody>
例如，如果我的查询 getReservations 有 10 条记录，它将显示 10 个输入。问题是，如果我尝试更改输入，它总是在数据库中更新 table 中显示的第一条记录（它总是将第一条记录值 #ReservaID# 发送到 hC-update-database.cfm ).如何将 2 个值发送到 cfc（输入和 ID）？
尝试这样的事情：
表单模板：
形式-template.cfm
<cfparam name="url.clientid" default="0">
<cfoutput>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("input[type=checkbox][name=arrived]").on('click',function(event){
var currentObj = jQuery(event.currentTarget);
if(currentObj.prop("checked") === true){
var ajaxurl = "ajax-update-database.cfm?clientid=" + jQuery('input[type=hidden][name=clientid]').val();
jQuery.ajax({
url:ajaxurl
})
.done(function(response) {
var obj = JSON.parse(response);
console.log("obj",obj);
})
.fail(function(jqXHR, textStatus, errorMessage) {
console.log("errorMessage",errorMessage);
});
}
});
});
</script>
</head>
<body>
<form>
<label for="arrived">Arrived</label><br />
<input type="checkbox" name="arrived">
<input type="hidden" name="clientid" value="#url.clientid#">
</form>
</body>
</html>
</cfoutput>
Ajax 模板：
ajax-更新-database.cfm
<cfparam name="url.clientid" default="0">
<cfparam name="variables.response" default="#StructNew()#">
<cfset variables.response['error'] = "">
<cfif Val(url.clientid)>
<cftry>
<cfquery datasource="yourDSN">
UPDATE yourDBTable
SET Arrived = <cfqueryparam cfsqltype="cf_sql_tinyint" value="1">, Submission_date = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#Now()#">
WHERE ClientID = <cfqueryparam cfsqltype="cf_sql_integer" value="#url.clientid#">
</cfquery>
<cfcatch>
<cfset variables.response['error'] = "An error occurred whilst trying to update the database">
</cfcatch>
</cftry>
</cfif>
<cfoutput>
#SerializeJSON(variables.response)#
</cfoutput>
no matter which checkbox I check it always updates in the database the first record that shows up in the table
这是因为演示示例在设计时考虑了单个记录。如果您的表单实际处理多条记录，则需要修改 JS 和 CF 代码。
由于您只是将 ID 传递给 CF，因此不需要单独的隐藏字段。只需使用 "ReservaID" 作为复选框值。当复选框状态更改时，使用 "change" 事件更新记录。下面的示例在选中一个框时更新记录。请记住，用户可以取消选中一个框 - 或重新选中它。您需要决定如何在数据库端处理这些事件并相应地修改代码。前任。未勾选时要清空到货日期吗？如果重新检查等，则使用当前日期和时间更新记录...?
请注意，我的偏好是使用 CFC 进行 ajax 调用。 JS代码类似，只是URL和数据参数
不同<!--- manual query for DEMO --->
<cfset getReservations = queryNew("ReservaID","integer",[[1],[2],[3],[4]])>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".arrived").on("change",function(event){
if (this.checked) {
var reservaID = this.value;
console.log("Updating id = "+ reservaID);
$.ajax({
url: "SomeComponent.cfc"
, type: "POST"
, dataType: "json"
, data: {"method" : "updateArrival", "returnFormat": "json", "id": reservaID}
}).done(function(response) {
console.log("response", response);
}).fail(function(jqXHR, textStatus, errorMessage) {
console.log("errorMessage",errorMessage);
});
}
});
});
</script>
<form>
<cfoutput query="getReservations">
<input type="checkbox" class="arrived" name="arrived" value="#ReservaID#" />
</cfoutput>
</form>
在 CF 端，创建一个接受单个数字 ID 的远程函数。
<cfcomponent>
<cfset variables.dsn = "listareservas">
<cffunction name="updateArrival" returntype="struct" access="remote">
<cfargument name="id" type="numeric" required="true">
<cfset local.response = {success=true}>
<cftry>
<cfquery datasource="#variables.dsn#">
UPDATE Reservas
SET ReservaHoraChegada = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#Now()#">
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>
</cfcomponent>