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

我陷入了沉思。我有一个复选框，希望用于将相应的对象传输到页面上的另一个范围。而且，我只想传输此选中对象的一个​​字段。我通过创建.json文件使用了较早的Ajax，然后在控制器中对其进行了响应。就我而言，输入复选框似乎没有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使用event来实现这一目标。

到目前为止，我已经设法编写了一些可以移动整个对象的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

最佳答案

您所要做的就是向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);
            });
        }
      });
    });

编辑：固定上下文使用。

查看有关如何正确设置jqXHR的jQuery文档：
http://api.jquery.com/jquery.ajax/