如何在rails 4中通過AJAX將其他字段添加到表單中？

Question

我在Rails 4上。假設我有三種型號：House,Color和HouseColoring。

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部分爲我的房子new和edit

<%= 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.erb或add_color動作。

有什麼建議嗎？

Answer 1

那麼，你在這裏有兩個選擇。

1. 使用在嵌套的範本railscasts信息：Part 1和Part 2

2. 使用FormObject模式，使泰德嵌套更容易一點。該模式在十幾個地方描述，還有on railscasts（需要訂閱）。

3. 使用像Angular這樣的js框架。js在客戶端即時添加新字段。 Angular.js也包含在railscast（需要訂閱）中，並且有非常豐富的documentation。

UPDATE 錯誤告訴你幾乎所有的它。您將一個c對象作爲表單生成器對象發送給partial。並且好像你沒有在houses#add_color操作中實例化它。

Answer 2

看看這兩項railscasts插曲：

Nested Forms 1

Nested Forms 2

第二屆一個深入闡述什麼你究竟在尋找。