javascript - jQuery 将隐藏表单字段发布到 ColdFusion 查询

Question

我有一个带有 2 个选项卡的 jQuery 选项卡元素。每个选项卡上都有一个表单，分别有自己的操作页面。

我还有 JavaScript 代码，可以防止默认页面刷新并将数据发布到我的操作页面。

我的表单上的第二个选项卡有多个由 CFLoop 创建的独特表单元素。我用它从数据库中删除特定记录。但是当我提交表单时，操作页面上的查询会抛出错误。我可以在 Firebug 中看到错误，但在屏幕上看不到(如果有人知道更详细地查看 ColdFusion 错误代码的方法，那会很有帮助):

500(执行数据库查询时出错。)

我以隐藏表单字段的形式将记录 ID 传递给操作页面上的查询。我需要用 jQuery 来实现这一点吗？感谢您的帮助。

表单代码:

<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 代码:

<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 查询

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

有人可以帮忙吗？非常感激。

Answer 1

正如 Matt 评论的那样，问题在于第二个选项卡上的所有表单都具有相同的 ID(deletemileage)。因此，当您尝试使用

绑定(bind)到提交事件处理程序时

$('#deletemileage').submit(function (e) { ... } );

您实际上只绑定(bind) jQuery 找到的与您的选择器匹配的第一个 DOM 元素。 ID 为 deletemileage 的第一个 DOM 元素是 tab2 上的第一个表单，因此它被正确绑定(bind)，其余的根本不被绑定(bind)。

来自 jQuery 文档:

"Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid."

所以，有两件事。首先，正如 Matt 建议的那样定义您的 id，例如 id="deletemileage#get_trips.current_row#"以使 HTML 有效。其次，如果您想将提交事件绑定(bind)到所有表单，请给它们一个类似 class="deleteMileageForm"的类。然后使用

$(".deleteMileageForm").submit(function(e) { ... } );

绑定(bind)您的提交处理程序。希望有帮助。