Question

我尝试发送表单并在单击提交按钮时删除表格行。

删除行功能我用Coffee Script方式做了，“删除表行”有效。

但是，提交表单功能不起作用。

但如果我删除咖啡脚本，则提交表单会再次生效。

咖啡脚本

jQuery ->
    $("#rf_tbl").on "click", "input[type=\"submit\"]", (e) ->
        $(this).closest("tr").remove()

查看

  = form_tag kill_running_task_remote_focus_path, :method => :get, remote: true do
    %table#rf_tbl.table.table-condensed.table-striped

      %tr
        %th User
        %th Camera IP
        %th Created Time
        %th PID
        %th Control

      - @running_tasks.each do |running_task|
        %tr{:id => "#{running_task[:pid]}"}    
          - running_task.each do |key, value|        
            %td
              = value
          %td
            = hidden_field_tag :task, running_task[:pid]
            = submit_tag "Kill This Task" ,:class=> "btn btn-primary autotest"

Rails中是否正常？

请给我一些建议，谢谢。

Answer 1

这是不正确的。

问题1：所有行都有一个完整的大表单。提交时，您只想删除该行上的数据，但最后提交整个表单。这是低效且容易出错的。修复是为每行构建一个表单（您也可以使用link_to和remote：true，每个链接的每个表单也以此结束）

问题2：不要听取表单的提交并立即删除该行。 UJS（remote: true的处理者）也观看此事件。我的猜测是，虽然之前从未这样做过，但是两个监听器将有一个命令来执行，因为Javascript是单线程。如果您的监听器最初被执行，数据被删除，那么当UJS到来时，它没有要序列化的表单字段并且会哭:(

在问题2中，即使您没有删除该行，也存在另一个问题。如果提交不成功怎么办？无论服务器响应是什么，您的监听器都会将该行标记为已完成。

jQuery Ajax中有解决方案，例如使用when，done。但由于您使用的是UJS，因此最简单的解决方案是将脚本呈现为在服务器响应时执行。

例如，您的第2行有专门的表单。提交时，控制器接收此请求，然后知道任务ID。然后，在响应js.erb时，您可以指定要删除的特定div。

$('#task_#{task.id}').remove();

Coffee Script中的方法将忽略表单提交操作

1 个答案: