Rails使用checkbox和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的"Rails之旅jQuery UJS"简要介绍了这个(以及许多其他可用的好东西); 在"不显眼的脚本支持jQuery的"页中的jQuery UJS维基做一个彻底的工作在这一点.

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].