jquery - 如何在 Coldfusion 中的复选框更改时更新数据库?

标签 jquery mysql ajax database coldfusion

所以我创建了一个表,其中一列是一个名为“Arrived”的复选框,这意味着如果有客户到达,我将选中该复选框,它会用当前时间更新我的数据库 (MySql)。 我知道我必须使用 jquery 向 Coldfusion 发出 Ajax 请求并更新数据库,但我不知道如何执行此操作。 有人可以给我一个如何做到这一点的小例子吗? 谢谢你, Mercurial

更新

所以我一直在为我的项目做一些事情,但我发现了一个问题。

这是我的 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>

我有一个正在由查询填充的表。

<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 个输入。问题是,如果我尝试更改输入,它总是在数据库中更新表中显示的第一条记录(它总是将第一条记录值 #ReservaID# 发送到 hC-update-database.cfm)。如何将 2 个值发送到 cfc(输入和 ID)?

最佳答案

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”作为复选框值。当复选框状态更改时,使用“更改”事件更新记录。下面的示例在选中一个框时更新记录。请记住,用户可以取消选中一个框 - 或重新选中它。您需要决定如何在数据库端处理这些事件并相应地修改代码。前任。未勾选时要清空到货日期吗?如果重新检查等,则用当前日期和时间更新记录...?

请注意,我更喜欢使用 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>

关于jquery - 如何在 Coldfusion 中的复选框更改时更新数据库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51352583/

相关文章:

mysql - 在同一列上使用多个 WHERE 范围条件进行选择

mysql - MySQL 中何时使用单引号、双引号和反引号

mysql - 比较多个字段和一个表

php - Codeigniter- Ajax Codeigniter Ajax - 通过 ajax 返回多行

javascript - 无法在 html 表格的下拉列表中显示 JSON 数据

javascript - 如何让 jQuery 与 Underscore 一起使用?

javascript - 回调实例化另一个发出 AJAX 请求的类的类

javascript - 多选复选框ajax表过滤器

php - 根据选择的第一个下拉列表获取下拉列表的值

javascript - :after selector not working if jquery inserts . 在链接中处于事件状态