Question

我已经陷入沉思。我有一个复选框，我想用它将相应的对象传输到我页面上的另一个范围。而且，我只想传输这个被检查对象的一个字段。我通过创建.json文件使用了早期的Ajax，然后在我的控制器中对它进行了响应。在我的情况下，输入复选框似乎没有remote: true选项。

视图/任务/ _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);
        }
      });
    })

但是我想只重新安置一个标题＆＃39;使用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

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

 $(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/

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

1 个答案: