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

Question

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

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

我真的不确定哪里看.我想我需要使用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的优秀建议,我用以下内容更新了我的文件.

的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>

任务控制器

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会再次破坏它:(

几乎找不到它是我的功能的内容.删除了一些代码后,我可以更新#ss的css:

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

知道我需要调用我的动作吗？Ĵ

Answer 1

如果我理解你要查找的内容(当选中或取消选中复选框时,会向服务器发送Ajax请求,并使用复选框的结果保存关联的对象),那么您需要在Ajax中执行此操作.

使用Rails 3你可能正在使用jQuery(或IMO,你应该).您需要在checkbox元素上实现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,因此该复选框可以位于您想要的任何位置.如果你想在索引视图中使用它,那就是你放置它的地方.你的复选框看起来像这样(请理解我不会仔细检查我的语法或任何东西):

= 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[:task]).你选择做前者,IMO,没事.

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

要解决第一个问题,您需要更改方法中的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