【问题标题】:Rails - updating div w/ Ajax and :remote => trueRails - 使用 Ajax 和 :remote => true 更新 div
【发布时间】:2012-12-04 06:21:53
【问题描述】:

我已经按照Railscast 通过 Ajax 提交表单并在不重新加载页面的情况下更新了一个 div,但我在其中一部分遇到了问题。

Ryan 在index.js.erb 文件中有$("#products").html("<%= escape_javascript(render(@products)) %>");,用于在提交表单时更新#products div。我很难理解像 @products 这样的实例变量是否与我的情况相关,或者我是否可以简单地将其替换为 URL。

我正在尝试在此截屏视频中与 Ryan 做同样的事情,但我不想显示搜索结果,而只想显示更新后的值。

在 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中有一行:&lt;%= todo.due %&gt;

所以在我的 index.js.erb 中,我目前有这个:$("#dueon").html("&lt;%= escape_javascript(render("_duedate")) %&gt;"); 但它显然不起作用。我是否必须在此处使用变量来代替_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

【问题讨论】:

    标签: ruby-on-rails ajax ruby-on-rails-3


    【解决方案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 实例变量

    HTH

    【讨论】:

    • 我已经可以通过在渲染部分时传递:todo =&gt; todo 来访问部分内部的@project.project_todos 变量。这还不够吗?如果不是,那么#your code 评论中会包含什么内容?像ProjectTodos.all 这样的东西?感谢您的评论!
    • @TrevanHetzel,您能否发布您的控制器操作,以便我给您一个更好的答案 :)
    • 当然,我刚刚用 ProjectsController 的 show 动作更新了问题。
    • 另外,我应该澄清一下,我正在项目的显示视图中显示 project_todos(它有自己的模型和属于一个项目)的表单和值。
    • 我如何将此表单提交给您在上面编写的操作以及如何将此路径添加到路由文件
    【解决方案2】:

    我会单独回答你,因为我相信你的整个设置应该没有什么变化(IMO,这可能不是这种情况)

    我认为你应该有一个属于它的项目的 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 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%>
    

    根据关系,项目有很多待办事项,在待办事项添加屏幕中始终清楚地显示项目详细信息,而不是允许用户从项目屏幕添加新的待办事项。

    再次,这是我的个人观点,请随时提出任何问题:)

    【讨论】:

    • 感谢您的回复。由于应用程序的设置方式,我真的不想改变整个关联。 Todos 依赖于一个项目。您必须创建一个项目,然后将任务添加到该项目才能完成。不过,我很感谢你编写了所有这些代码,但不幸的是,我认为我现在不能切换我的关联。
    • 好的:),那么我认为你的方法是正确的,只需将渲染格式更改为 js ,而不是 json,让我知道它有效:D
    • 我猜我需要将 ProjectTodos 控制器的update 方法中的format.json { head :no_content } 行更改为format.js?它不起作用,所以我一定做错了什么。
    • 顺便说一句,您是否遇到任何 ajax javascript 错误,您可以通过 FF 中的 firebug 进行检查,因为有些情况下protect_from_forgery 命令会阻止您,请检查您的客户端 ajax 错误
    猜你喜欢
    • 2016-04-28
    • 1970-01-01
    • 2015-01-04
    • 2017-06-11
    • 1970-01-01
    • 2011-11-02
    • 2012-05-14
    • 1970-01-01
    • 2012-01-06
    相关资源
    最近更新 更多