Rails - 使用Ajax和:remote => true更新div

Question

我参考了这个Railscast，学习使用Ajax提交表单并更新div而不重新加载页面，但我在其中遇到了一些问题。

Ryan在index.js.erb文件中使用$("#products").html("<%= escape_javascript(render(@products)) %>");来更新#products div。我不确定像@products这样的实例变量是否适用于我的情况，或者我是否可以简单地将其替换为URL。

我试图像Ryan在screencast中所做的那样，但与其显示搜索结果不同，我只想显示更新后的值。

在show.html.erb中，我有以下内容：

<% @project.project_todos.order("created_at DESC").where(:status => false).each do |todo|%>

<%= form_for todo, :remote => true, :"data-replace" => "#dueon" do |f| %>
   <%= f.text_field :due %>
   <%= f.submit :class => "primary", :value => "Add" %>
<% end %>

<div id="dueon">
   <%= render "duedate", :todo => todo %>
</div>

<% end %>

部分文件_duedate.html.erb只有一行代码：<%= todo.due %>

因此，在我的index.js.erb中，我目前有以下代码：$("#dueon").html("<%= escape_javascript(render("_duedate")) %>"); ，但显然不起作用。我在这里必须使用一个变量来代替_duedate吗？如果是的话，我怎么在控制器中设置呢？我的意思是变量要表示什么？

另外，值得一提的是，该部分正确地渲染并显示了todo.due值……只是在我提交表单后没有更新。

ProjectsController:

def show
    @project = Project.find(params[:id])

    # Display the form to create a new todo
    @project_todo = ProjectTodo.new

    respond_to do |format|
      format.html # show.html.erb
      format.json { render :json => @project }
    end
  end

- Trevan Hetzel

Answer 1

尝试这个：

在您的控制器操作中（例如sample_action）：

def sample_action
   @todos = #your code

   respond_to do |format|
      format.js
   end
end

假设你有一个名为sample_action.js.erb的文件。

$("#dueon").html("<%= raw escape_javascript(render(:partial => 'duedate')) %>")

然后在局部视图中，您可以访问新的@todos实例变量。

希望对您有所帮助。

- sameera207

---

我已经通过在渲染局部时传递 :todo => todo 来访问 @project.project_todos 变量。这不够吗？如果不够，那么 #your code 注释中应该放什么？像 ProjectTodos.all 这样的东西吗？感谢您的评论！ - Trevan Hetzel

@TrevanHetzel，你能发布你的控制器动作吗？这样我就可以给你一个更好的答案了 :) - sameera207

当然，我刚刚更新了ProjectsController的show操作的问题。 - Trevan Hetzel

另外，我应该澄清一下，我正在项目的展示视图中显示project_todos表单和值（它有自己的模型，并属于一个项目）。 - Trevan Hetzel

我该如何将此表单提交到您上面编写的操作，并将此路径添加到路由文件中？ - Alaa Othman

Answer 2

我会单独回答你，因为我认为你的整个设置应该有一些改变（在我看来，这可能不是这种情况）

我认为你应该有一个包含项目的todos控制器，

--- 模型 ----------------

class Project < ActiveRecord::Base
  has_many :todos
end

class Todo < ActiveRecord::Base
   belongs_to :project
end

---- 路由 ---------------

resources :projects do
  resources :todos do
  end
end

---- 控制器 ----------

class ProjectsController < ApplicationController

end

class TodosController < ApplicationController

   def new
      @project = Project.find(params[:project_id])
      @todos = @project.todos.build
   end
end

在你的视图中（views/todos.html.erb）

<%= @project.name %>
<%= form_for([@Project, @todos]) do |f| %>
  #todo form code
<% end%>

根据关系，项目有许多待办事项，在添加待办事项的屏幕中显示项目详细信息总是更清晰，而不是允许用户从项目屏幕添加新的待办事项。

还有一点，这是我的个人观点，随时欢迎提出任何问题 :)

- sameera207

---

谢谢您的回复。由于应用程序的设置方式，我不想改变整个关联。任务依赖于项目。您必须创建一个项目，然后添加任务以完成它。我很感激您编写了所有的代码，但不幸的是，我认为我现在无法切换我的关联。 - Trevan Hetzel

好的 :)，那我认为你的方法是正确的，只需要将渲染格式更改为js，而不是json，如果可以的话请告诉我 :D - sameera207

顺便问一下，你有收到任何AJAX JavaScript错误吗？你可以通过火狐浏览器的Firebug来检查，因为有时候protect_from_forgery命令会阻止你的进程。检查一下你客户端的AJAX错误。 - sameera207

是的，我把它们发布在你回答的底部了。 - Trevan Hetzel

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/21246/discussion-between-sameera207-and-trevan-hetzel - sameera207