javascript - 如何使用 Ajax 通过复选框将对象移动到另一个范围？

Question

我陷入了沉思。我有一个复选框，我想用它来将相应的对象传输到页面上的另一个范围。此外，我只想传输此检查对象的一个​​字段。我之前通过创建 .json 文件来使用 Ajax，然后在 Controller 中对其进行响应。就我而言，输入复选框似乎没有 remote: true 选项。

views/tasks/_index.html

<h3>Tasks database</h3>

<table>

  <% @tasks.each do |task| %>
    <tr class='tasks' id="task_<%= task.id %>">

    #Some stuff

      <td>
        <input type="checkbox" class='check' data-id="<%= task.id %>" >
      </td>

    </tr>

  <% end %>

</table>

<h3>Completed</h3>

<div class="complete-tasks">
</div>

因此，我尝试通过 javascript 使用事件来实现这一点。

到目前为止，我已经成功编写了一些 JavaScript 代码来移动整个对象。

application.js

  $(document).on('ready page:load', function () {
        $('.check').on('change', function(){
        if ($(this).is(':checked')) {
        id = $(this).attr('data-id');
        task = $(this).closest("tr");
        $('.complete-tasks').last().after(task);
        }
      });
    })

但我只想使用 Ajax 重新定位一个“标题”字段。有人可以解释一下如何实现这一点吗？我怀疑我需要在复选框中传递一些 id 并定义 $.ajax。

模型/task.rb

class Task < ActiveRecord::Base

  scope :complete, -> { where(complete: true) }
  scope :incomplete, -> { where(complete: nil) }

  belongs_to :user
end

Answer 1

您所要做的就是向 URL 发出请求，然后移动表格行/标题单元格。

 $(document).on('ready page:load', function () {
        $('.check').on('change', function(){
        if ($(this).is(':checked')) {
            id = $(this).attr('data-id');
            //Url is the site you want to hit.
            var jqXHR = $.ajax(url);
            var element = this;
            jqXHR.done(function(data){
                //Ajax finish here.
                task = $(element).closest("tr");
                $('.complete-tasks').last().after(task);
            });
        }
      });
    });

编辑:修复了上下文使用。

查看 jQuery 文档，了解如何正确设置 jqXHR: http://api.jquery.com/jquery.ajax/