ruby-on-rails - Rails3 从索引 View 更新 bool 复选框

Question

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

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

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

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

提前致谢

--- 编辑 1 --

根据下面@pcg79 的建议，我在我的申请中添加了以下内容，但我不明白我是如何实际改变状态的。

在我的索引 View 中，我有这个:

<%= 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
    }
  });
});

由于缺乏理解，我将其添加到我的任务 Controller 中:

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

这似乎是合理的，但不确定如何在 ajax 中实际调用它？

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

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

-- 编辑 2--

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

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

但仍然得到 RoutingError。

-- 小幅更新--

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

Routes.rb

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

Index.html.erb

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

任务 Controller

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

Answer 1

如果我了解您要寻找的内容(当检查复选框或未选中复选框时，将AJAX请求发送到服务器，并且关联对象将在复选框的结果中保存)，那么是的，是的，您将要执行它在 Ajax 中。

在 Rails 3 中，您可能正在使用 jQuery(或者，IMO，您应该使用)。您需要在复选框元素上实现单击事件。该 click 事件在触发时将对您的服务器进行 Ajax 调用。您需要执行 PUT 请求，因为它是更新。您将发送对象的 id 和复选框的值。

有很多网站都有 Rails 和 Ajax 的示例。这个( http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/ )很好，因为它让您使用我喜欢的 HTML 5“数据”字段。在 SO 上也有很多类似的问题。这是一个不是 Rails 的，但可以让您了解如何编写 jQuery (AJAX Checkboxes)。

编辑以回答评论中的问题

复选框可以放在任何你想要的地方，因为你在做 Ajax。如果你想要它在你的索引 View 上，那就是你放它的地方。你的复选框看起来像这样(请理解我没有仔细检查我的语法或任何东西):

= 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 属性的方法。或者，您可以调用普通的 RESTful update 方法传入 :task => {:status => true} 并调用 @task.update_attributes(params[:任务])。你选择了前者，IMO 很好。

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

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

要解决第二个问题，请确保在最后调用 @task.save。

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