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'=＆gt; 'tasks＃completed'，：as =＆gt; ：completed_task

但仍然得到RoutingError。

- 轻微更新 -

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

的routes.rb

获取'task /：id'=＆gt; 'tasks＃completed'，：as =＆gt; ：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会再次破坏它:(

几乎找不到它是我的功能的内容。删除了一些代码后，我可以为＃：

更新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，或者您可以将网址设为仅完成任务的特定方法。

修改已更新的问题：

要解释我的第二次编辑，为了更新要完成的任务，您可以执行以下两项操作之一。您可以调用明确用于设置status属性的方法。或者，您可以调用传入update的正常RESTful :task => {:status => true}方法并致电@task.update_attributes(params[:task])。你选择做前者，IMO，没事。

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

要解决第一个问题，您需要更改data-href方法中check_box_tag属性指向的路径。你不想要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

Answer 2

在更新的示例中，请尝试替换：

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

使用：

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

提供@task.id = 1，tasks_path(@task)返回/tasks.1，而task_path(@task)返回/tasks/1

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

2 个答案: