Rails 4：如何通過AJAX更新基於另一個collection_select的collection_select？

Question

問題：我需要根據組織集合的選擇過濾單位集合。

選擇組織后 ， 單位下拉菜單應刷新以僅顯示屬於知情組織的單位 。

我檢查過這些問題：

• Rails表單：使用AJAX基於其他collection_select值更新collection_select選項

• UJS，AJAX，Rails 4，form_for collection_select將值傳遞給方法並將值返回到表單

• 帶有collection_select的rails中的ajax

• 如何添加onchange事件以在rails中選擇標記

• Rails表單：使用AJAX基於其他collection_select值更新collection_select選項

• Rails form_for collection_select忽略select_tag接受的遠程ajax調用

• 遠程選擇，控制器需要更多表格數據

這些文件：

• http://guides.rubyonrails.org/form_helpers.html
• http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html
• http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-options_from_collection_for_select

到目前為止這是我的代碼：

楷模

class Organization < ActiveRecord::Base
  has_many :units
  has_many :projects, through: :units
end
class Unit < ActiveRecord::Base
  belongs_to :organization
  has_many :projects
end
class Project < ActiveRecord::Base
  belongs_to :organizaton
  has_one :organization, through: :unit
end

查看 app / views / projects / _form.html.erb

<%= form_for(@project) do |f| %>

  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>
  <div class="field">
    <%= f.label :organization_id %><br>
    <%= f.collection_select :organization_id, Organization.all, :id, :name %>
  </div>
  <div class="field">
    <%= f.label :unit_id %><br>
    <%= f.collection_select :unit_id, Unit.all.where(organization_id: :organization_id), :id, :name %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

控制器 項目控制器

def new
  @project = Project.new
end

def project_params
  params.require(:project).permit(:name, :description, :organization_id, :unit_id)
end

我怎樣才能做到這一點？

Answer 1

我做到了，解決方案非常簡單，但缺乏關於這個簡單問題的更新材料使它成為一個比它應有的更大的苦差事：

配置/ routes.rb中

 get 'filter_units_by_organization' => 'projects#filter_units_by_organization'

控制器/ projects_controller.rb

def filter_units_by_organization
  @filtered_units = Unit.where(organization_id: params[:selected_organization])
end

意見/項目/ filter_units_by_organization.js.erb

$('select#project_unit_id').html('<%= j options_from_collection_for_select(@filtered_units, :id, :name) %>');

資產/ Java腳本/ application.js中

$(function() {
    $("select#project_organization_id").on("change", function() {
        $.ajax({
            url:  "/filter_units_by_organization",
            type: "GET",
            data: { selected_organization: $("select#project_organization_id").val() }
        });
    });
});

意見/項目/ _form.html.erb

<div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>
  <div class="field">
    <%= f.label :organization_id %><br>
    <%= f.collection_select :organization_id, Organization.all, :id, :name, { prompt: 'Please select' } %>
  </div>
  <div class="field">
    <%= f.label :unit_id %><br>
    <%= f.collection_select :unit_id, Unit.all.where(organization_id: :organization_id), :id, :name %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>

Answer 2

您應該將關系設置為通過單元模型，而不是在projects表上放置重復的organization_id 。

class Organization < ActiveRecord::Base
  has_many :units
  has_many :projects, through: :units
end

class Unit < ActiveRecord::Base
  belongs_to :organization
  has_many :projects
end

class Project < ActiveRecord::Base
  belongs_to :unit
  has_one :organizaton, through: :unit
end

這避免了您必須確保單元和項目具有相同的organizaton_id的尷尬問題。

這也意味着您在創建項目時不再需要輸入來選擇組織 - 只需要單元。