如何通过rails 4中的AJAX向表单添加其他字段?

时间:2013-10-25 21:04:22

标签: ruby-on-rails ruby-on-rails-4 actioncontroller

我在Rails上4.假设我有三个模型:HouseColorHouseColoring

class House < ActiveRecord::Base
  has_many :house_colorings
  has_many :colors, through: :house_colorings
  accepts_nested_attributes_for :house_colorings, allow_destroy: true
end

class Color < ActiveRecord::Base
  has_many :house_colorings
  has_many :houses, through: :house_colorings
end

class HouseColoring < ActiveRecord::Base
  belongs_to :house
  belongs_to :color
end

houses_controller.rb

class HousesController < ApplicationController
  before_action :set_house
  ...

  def new
    @house = House.new
    @house.house_colorings.build
  end

  def create
    @house = House.create(house_params)
    if @house.save
      redirect_to @house
    else
      render 'new'
    end
  end

  def edit
    #Gets @house from set_house
  end

  def update
    if @house.update(house_params)
      redirect_to @house
    else
      render 'edit'
    end
  end

  ...

  private

    def set_house
      @house = House.find(params[:id])
    end

    def house_params
      params.require(:house).permit(:some_parameters, house_colorings_attributes: [:id, :color_id])
    end
end

以下是我的_form.html.erb部分房屋newedit

<%= form_for @house do |f| %>
  <div id="house_colorings">
    <%= f.fields_for :house_colorings do |c| %>
      <%= render "house_colorings", f: c %>
    <% end %>
  <%= link_to "Add color", add_color_path, remote: true %>
</div>
<% end %>

_house_colorings.html.erb

<%= f.collection_select :color_id, Color.all, :id, :name, {include_blank: "Select color"} %>

houses_controller中,我添加了:

def add_color
  respond_to do |format|
    format.js
  end
end

add_color.js.erb

$("#house_colorings").append("<%= escape_javascript render 'house_colorings', f: c %>");

我为add_color方法添加了一条路线:

GET "/add_color" => "houses#add_color"

当我点击我的add color链接时,屏幕上没有任何反应,但在我的日志中,我得到500 internal server error

Started GET "/add_color" for 127.0.0.1 at 2013-10-26 21:11:41 -0700
Processing by HousesController#add_color as JS
  Rendered houses/add_color.js.erb (11.3ms)
Completed 500 Internal Server Error in 14ms

ActionView::Template::Error (undefined local variable or method `f' for #<#<Class:0x007fc317428538>:0x007fc31710d060>):
    1: $("#house_colorings").append("<%= escape_javascript render 'house_colorings', f: c %>");
  app/views/houses/add_color.js.erb:1:in `_app_views_houses_add_color_js_erb__1847085463095078116_70237941180700'

截至目前,我只有一个字段可以将house_coloring添加到我家。我想添加一些ajax,并在我的表单中有一个链接,在那个之后添加一个新字段,但我不知道如何做到这一点。

我已经浏览了Railscasts的“嵌套模型表单”,并使用它们中的一部分来达到我现在的目的,但是如果可以的话,我想使用rails提供的“data_remote”帮助程序。我编辑了我的问题并包含了我点击添加颜色链接时出现的错误的日志。我很确定我需要更改我的房屋控制器中的add_color.js.erbadd_color操作。

有什么建议吗?

2 个答案:

答案 0 :(得分:3)

嗯,你这里有几个选择。

  1. 使用嵌套模型表单railscast中的信息:Part 1Part 2

  2. 使用FormObject模式使嵌套更容易一些。该模式在十几个地方描述,并且on railscasts(需要订阅)。

  3. 使用像Angular.js这样的js框架即时在客户端添加新字段。 Angular.js也包含在railscast(需要订阅)中,并且非常丰富documentation

  4. <强>更新 错误告诉你几乎所有这些。您将c对象作为表单生成器对象发送到partial。似乎你没有在houses#add_color行动中实例化它。

答案 1 :(得分:0)

查看这两个railscasts剧集:

Nested Forms 1

Nested Forms 2

第二部分深入解释了您正在寻找的内容。