在rails 4中动态显示属于父对象的对象

时间:2014-07-18 15:33:06

标签: javascript jquery ruby-on-rails ajax json

我正在尝试创建动态且基于所选父对象的下拉列表。

我的模特是社区,地段,住宅和社区住宅

class Community < ActiveRecord::Base
  has_many :lots
  has_many :community_homes
  has_many :communities, through: :community_homes
end
------------------------------------------------------------------
class CommunityHome < ActiveRecord::Base
  belongs_to :community
  belongs_to :home
end
------------------------------------------------------------------
class Lot < ActiveRecord::Base
  belongs_to :community
end
------------------------------------------------------------------
class Home < ActiveRecord::Base
  has_many :community_homes
  has_many :communities, through: :community_homes
end
-------------------------------------------------------------------

该表单包含所有社区的下拉列表。我需要其他下拉列表才能显示与所选社区相关联的地段和住宅。

例如,我的一个社区有29个地块和14个平面图(住宅)。当选择该社区时,我希望那些29个批次和14个家庭成为下拉列表中的唯一对象,而不是所有198个批次和45个家庭。任何帮助和/或正确方向的简单点都将非常感谢...谢谢!

&lt; --------------------------- EDITED INFO ------------- --------------&GT;

我选择社区,地段和家庭的表格是合同。 Homes CRUD与社区和合同分开,然后通过has_many通过关联加入社区。很多被创建为属于社区。

class Contract < ActiveRecord::Base
  validates :customer_name, :customer_phone_number, presence: true
  has_one :community
  has_one :lot
  has_one :home
end

合同表

= simple_form_for @contract do |f|
  .community-select
    = f.collection_select( :community, Community.all, :id, :name, {}, { :multiple => false } )
  %br
  .lot-select  
    = f.collection_select( :lot_number, Lot.all, :id, :number, {}, { :multiple => false } )
  %br
  .inputs
    = f.text_field :property_address, placeholder: "Property Address", class: "myform-control"
  %br
    = f.text_field :customer_name, placeholder: "Customer Name", class: "myform-control"
  %br
    = f.text_field :customer_phone_number, placeholder: "Customer Phone Number", class: "myform-control"
  %br
    = f.text_field :selection_date, placeholder: "Selection Date", class: "myform-control"
  %br
  .home-select
    = f.collection_select(:home, Home.all, :name, :name, {}, {:multiple => false } )
  %br
= f.submit 'Save', class: "btn btn-success"
= link_to "Cancel", contracts_path, type: "button", class: "btn btn-danger"

我正在为.json

使用gem active_model_serializer

2 个答案:

答案 0 :(得分:0)

我会(因为它已经应该)使下拉选项的值成为community的id。使用JS在该元素上添加一个事件监听器,当它发生更改时,进行AJAX调用以使用选定的社区的 id获取下一条信息。然后在AJAX调用的响应处理程序中填充选项。对于任何JS MV *框架,例如backbone,ember,angular等,这都是一个很好的用例。然后,您可以使用模板框架生成要插入DOM的HTML。

答案 1 :(得分:0)

这就是我最终让它发挥作用的方式。我摆脱了active_model序列化程序gem并在Rails中使用了JSON 我的routes.rb

Rails.application.routes.draw do
...
  resources :communities, only: [:index, :show] do
    get :lots, on: :member
    get :homes, on: :member
  end
...

communities_controller.rb

class CommunitiesController < ApplicationController

  def lots
    @lots = @community.lots.available
    respond_to do |format|
      format.html
      format.json { render json: @lots }
    end
  end

  def homes
    @homes = @community.homes.all
      respond_to do |format|
      format.json { render json: @homes }
    end
  end

contracts.js.coffee

  $("#contract_community_id").on "change", ->
    id = $(this).val()
    $.getJSON "/communities/#{id}/lots", (lot) ->
      $.each lot, (key, value) ->
        options = ""
        i = 0
        number = this.number
        while i < lot.length
          options += "<option value=\"" + lot[i].number + "\">" + lot[i].number + " "</option>"
          i++
        $("#contract_lot_number").html options
        return
      return