Rails 使用复选框和 jquery ajax 更改布尔值

Question

我是 Rails 新手，我试图通过复选框和使用 jquery ajax 来更改布尔值：

<%- @tasks.each do |task| %>
  <div class="task-wrapper">
    <%= check_box_tag 'completed', task.id , task.completed, :class => "task-check" %>
    <%= content_tag :span, task.task %>
    <%= content_tag :span, task.deadline %>
  </div>
<% end %>

和javascript：

$(".task-check").bind('change', function(){
  if (this.checked){
    var bool = this.checked ? 1 : 0;
    $.ajax({
      url: '/todos/toggle',
      type: 'POST',
      data: '{"task_id":"'+ this.value +'", "bool":"'+ bool +'"}'
    });
  }
  else {
    alert("no");
  }
});

然后是控制器：

def toggle(task_id, bool)
  @task = Todo.find_by_id(task_id)

  if @task != nil?
    @task.update_attributes(:completed => bool)
  else
    set_flash "Error, please try again"
  end
end

最后是路线：

resources :todos do
  member do
    post 'toggle'
  end
end

也尝试过收集，但给出了同样的错误。

每当我尝试它时，我都会在操作中收到 404 error。

有什么问题？

谢谢

Answer 1

从 Rails 4 开始，有一种方法可以做到这一点，而无需任何额外的 JS 或 CSS：

<%= check_box_tag 'completed', task.id, task.completed,
      data: {
        remote: true,
        url: url_for(action: :toggle, id: task.id),
        method: "POST"
      } %>

事实证明，将remote: true 添加到输入会导致 jquery-ujs 以所有不错的方式使其成为 ajax-y。 Thoughtbot 的"A Tour of Rails jQuery UJS" 简要介绍了这一点（以及许多其他可用的好东西）； jQuery UJS wiki 中的 "Unobtrusive scripting support for jQuery" page 在这方面也做了彻底的工作。

Answer 2

尝试以下方法（其他一切保持原样）：

javascript：

$(".task-check").bind('change', function(){
  if (this.checked){
    $.ajax({
      url: '/todos/'+this.value+'/toggle',
      type: 'POST',
      data: {"completed": this.checked}
    });
  }
  else {
     alert("no");
  }
});

控制器：

def toggle
  @task = Todo.find(params[:id])

  if @task.update_attributes(:completed => params[:completed])
    # ... update successful
  else
    # ... update failed
  end
end

查看bundle exec rake routes，向您展示rails 生成的路径。如果您的 post 'toggle' 是成员，您将获得类似 /todos/:id/toggle 的路径，因此在 ajax 中更新了 url。

在控制器中，路径中的:id 以params[:id] 结尾。来自 ajax 请求的数据也以 params 散列结束，因此是 params[:completed]。