Question

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

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

我表单上的第二个标签有多个由CFLoop创建的唯一表单元素。我用它来删除数据库中的特定记录。但是当我提交表单时，我的操作页面上的查询会引发错误。我可以在Firebug中看到错误，但不能在屏幕上看到错误（如果有人知道更详细地查看ColdFusion错误代码的方法，那将会有所帮助）：

500（执行数据库查询时出错。）

我以隐藏表单字段的形式将记录ID传递给actionpage上的查询。使用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）。因此，当您尝试使用

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

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

你实际上只绑定了jQuery找到的与你的选择器匹配的第一个DOM元素。 ID为deletemileage的第一个DOM元素是你在tab2上的第一个表单，因此它被正确绑定，其余部分根本没有绑定。

来自jQuery文档：

＆＃34;每个id值只能在文档中使用一次。如果超过一个元素已分配相同的ID，使用该ID的查询只会选择DOM中第一个匹配的元素。这种行为但是，不应该依赖;包含多个文档的文档使用相同ID的元素无效。＆＃34;

所以，有两件事。首先，正如Matt所建议的那样定义你的id，如id =＆＃34; deletemileage＃get_trips.current_row＃＆＃34;使HTML有效。其次，如果要将提交事件绑定到所有表单，请为其提供类class =＆＃34; deleteMileageForm＆＃34;。然后使用

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

绑定提交处理程序。希望有所帮助。

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

1 个答案: