Rails3 从索引视图更新布尔复选框

我正在为我们公司构建一个简单的任务应用程序，作为订购系统的一部分。

我有一个包含许多规则的任务列表。没什么复杂的...我所坚持的是添加一个复选框来完成任务。我希望它可以从索引视图实时完成，而不必点击提交。

我真的不知道该去哪里寻找。我想我需要使用 ajax 来做到这一点 - 谁能推荐一个教程或告诉我我应该寻找什么。

还考虑过一个插件，比如就地编辑插件。

提前致谢

---编辑1--

根据下面 @pcg79 的建议，我已将以下内容添加到我的应用程序中，但我不明白我如何实际更改状态。

在我的索引视图中我有这个：

<%= check_box_tag 'complete_task_1', '', false, { 'data-href' => tasks_path(@task) } %><

我已将以下内容添加到我的 application.js 中（添加 # 以使其正确调用）

 $('#complete_task_1').click(function() {
  $.ajax({
    url: $(this).data('href'),
    type: 'PUT',
    dataType: 'html',
    success: function(data, textStatus, jqXHR) {
      // Do something here like set a flash msg
    }
  });
});

由于缺乏理解，我将其添加到我的任务控制器中：

def completed 
    @task = Task.find(params[:id])
    @task.status = true
 end

这看起来很合理，但不确定如何在 ajax 中实际调用它？

在我的开发日志中，我可以看到它有点工作，但它说：

ActionController::RoutingError (No route matches "/tasks"):

-- 编辑 2 --

根据下面@jdc的建议，我尝试将以下内容添加到routes.rb：

获取 'tasks/:id/completed' => 'tasks#completed', :as => :completed_task

但仍然得到 RoutingError。

-- 轻微更新 --

根据下面 @pcg79 的出色建议，我用以下内容更新了我的文件。

路线.rb

获取 '任务/:id' => '任务#completed', :as => :completed_task

索引.html.erb

<td><%= check_box_tag 'complete_task_1', '', false, { 'data-href' => completed_task_path(:id => task.id) } %></td>

任务控制器

def completed 
    @task = Task.find(params[:id])
    @task.status = true
    @task.save
  end

我在浏览器中没有收到任何错误，但我的开发日志显示了以下内容：

ActionController::RoutingError (No route matches "/tasks"):

对于一个简单的复选框来说，这是一项艰苦的工作！

——另一个更新——

玩了一整天后，我决定看看用 Button_to 会发生什么，忘记了 ajax 方面的事情。我把这个放在我的代码中：

<%= button_to "Complete", completed_task_path(task.id) %>

并将路线更改为：

match 'tasks/:id/completed' => 'tasks#completed', :as => :completed_task

这真是一种享受。改回 check_box_tag 再次破坏了这一切:(

几乎已经弄清楚这是我的功能的内容。删除一些代码后，我可以更新 # 的 css：

 $('#complete_task_1').click(function() {
  $.ajax({
    success: function(data, textStatus, jqXHR) {
        $('#thing').css("color","red");
    }
  });
});

知道我需要什么来称呼我的行动吗？ J

如果我理解您要查找的内容（当选中或取消选中该复选框时，Ajax 请求将发送到服务器，并且关联的对象将与复选框的结果一起保存），那么是的，您需要在 Ajax 中执行此操作。

对于 Rails 3，您可能正在使用 jQuery（或者，在我看来，您应该使用）。您需要在复选框元素上实现单击事件。当该点击事件被触发时，将对您的服务器进行 Ajax 调用。您需要执行 PUT 请求，因为它是更新。您将发送对象的 ID 和复选框的值。

有相当多的站点提供了 Rails 和 Ajax 的示例。这个 （http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/ http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/）很好，因为它让您使用我喜欢的 HTML 5“数据”字段。这里也有很多类似的问题。这里不是 Rails，但可以让您了解如何编写 jQuery (AJAX 复选框 https://stackoverflow.com/questions/579878/ajax-checkboxes).

编辑回答评论中的问题

由于您使用的是 Ajax，因此该复选框可以位于您想要的任何位置。如果您希望将其放在索引视图中，则可以将其放置在此处。你的复选框看起来像这样（请理解我没有仔细检查我的语法或任何东西）：

= check_box_tag 'complete_task_1', '', false, { 'data-href' => task_path(@task_1) }

然后你的 jQuery 将看起来像这样：

$('complete_task_1').click(function() {
  $.ajax({
    url: $(this).data('href'),
    type: 'PUT',
    dataType: 'html',
    success: function(data, textStatus, jqXHR) {
      // Do something here like set a flash msg
    }
  });
});

第二次编辑：我意识到我忘记了在 Ajax 中实际发送复选框的值。你可以这样做，然后打电话@task.update_attributes或者您可以将 url 设为仅完成任务的特定方法。

编辑更新的问题：

为了解释我的第二次编辑，为了更新要完成的任务，您可以执行以下两项操作之一。您可以调用专门用于设置的方法status属性。或者你可以称之为正常的、RESTfulupdate方法传入:task => {:status => true}并打电话@task.update_attributes(params[:task])。你选择了前者，在我看来，这很好。

所以你有两个问题。首先，您没有引用指向您的新路线completed方法。第二个是你没有将你的对象保存在completed method.

要解决第一个问题，您需要更改您的路径data-href属性中的check_box_tag方法指向.你不想要task_path。 IIRC，你会想要completed_task_path(@task)。找出路径名称的最简单方法是运行rake routes在 Rails 项目的根目录中。

要解决第二个问题，只需确保致电@task.save在最后。

def completed 
  @task = Task.find(params[:id])
  @task.status = true
  @task.save
end