Rails動態更改集合基於表單字段在表單中選擇

Question

我有一個跟蹤呼叫的Rails 3.2.14應用程序，每個呼叫都有一個來自設施模型的關聯的代答和下車設施。

在呼叫模型中，存在區域模型的關聯（即，休斯頓，達拉斯，奧斯丁等），我們根據呼叫的來源來選擇區域。

我想做的是能夠選擇特定區域（即休斯頓），並且在接送設施集合中僅顯示休斯頓地區的設施。

我假設首先要在Facility和Region之間建立一個關系，如下所示：

facility.rb

attr_accessible :region_id
belongs_to :region

region.rb

has_many :facilities

然后，我需要為每個設施設置一個與各自區域（例如，休斯頓，達拉斯等）相匹配的region_id，以便關聯正常運行。

我不確定的是如何選擇特定區域，並且僅以表格形式顯示該區域中的設施。 我假設我會在這里使用一些jQuery / JS / Ajax來實現它，但不確定如何使它工作。

以下是我的呼叫，設施和區域模型當前的摘要：

call.rb

belongs_to :transferred_from, :foreign_key => :transfer_from_id, :class_name => 'Facility'
belongs_to :transferred_to, :foreign_key => :transfer_to_id, :class_name => 'Facility'
belongs_to :region

facility.rb

has_many :calls_transferred_from, :foreign_key => :transfer_from_id, :class_name => 'Call'
has_many :calls_transferred_to, :foreign_key => :transfer_to_id, :class_name => 'Call'

region.rb

has_many :calls

這是我的部分呼叫表格的摘錄：

_form.html.erb

<%= form_for(@call) do |f| %>
  <%= f.label :region %>
  <%= f.collection_select(:region_id, Region.all, :id, :area, {:include_blank => true}, {:class => 'select', required: true}) %>
  <%= f.label :Transfer_From %>
  <%= f.collection_select(:transfer_from_id, Facility.active.order("facility_name ASC"), :id, :facility_name, {:include_blank => true}, {:class => 'select'}) %>
 <%= f.button "Submit", class: 'btn btn-info btn-large', data: {disable_with: "<i class='icon-spinner'></i>Processing..."} %> 
<% end %>

如果有任何混淆或需要澄清的地方，請告訴我。 總而言之，我試圖選擇一個區域（休斯頓），並且僅在選擇該區域時以表格形式顯示休斯頓區域中的設施。

在此先感謝您提供的任何幫助或提示。

Answer 1

對於這樣的事情，我通常通過在客戶端中加載字典並引用它來使其保持簡單。

因此，在您看來，您可以構建如下所示的內容：

<script>
  var facilitiesForRegion = {};
  <% Facility.all.each do |facility| %>
    var region = facilitiesForRegion[<%= facility.region_id %>];
    var object = { id: <%= facility.id %>, name: '<%= facility.facility_name %>'};
    if (region) {
      region.push(object);
    }
    else {
      facilitiesForRegion[<%= facility.region_id %>] = [object];
    }
  <% end %>

  $("#call_region_id").on("change", function (e) {
    var id = parseInt($(this).val());
    var facilities = facilitiesForRegion[id];
    $('#call_transfer_from_id').children().remove();
    for (var i = 0; i < facilities.length; i++) {
      $('#call_transfer_from_id').push('<option value="'+ facilities[i].id +'">'+ facilities[i].name +'</option>');
    }
  });
</script>

這有點丑陋。 我不是在這樣的視圖中構建數據數組的最大支持者，但是它可以正常工作，並且避免了等待ajax請求。

請務必仔細檢查下拉菜單的ID。 我在猜測，基於字段名稱和for_for。

Answer 2

基於Railscasts動態選擇菜單，我提出了以下內容：

Calls.js.coffee

jQuery ->
  facilities = $('#call_transfer_from_id').html()

  $('#call_region_id').change ->
    region = $('#call_region_id :selected').text()
    options = $(facilities).filter("optgroup[label=#{region}]").html()

    if options
      $('#call_transfer_from_id').html(options)   
    else
      $('#call_transfer_from_id').empty()

_form.html.erb

<%= f.grouped_collection_select :transfer_from_id, Region.order(:area), :facilities, :area, :id, :facility_name, {include_blank: true}, class: 'select' %>

上面的grouped_collection_select的問題在於它調用：facilities列出了所有設施，我需要調用Facility.active的等效項（我在Facility上創建的范圍僅列出了活動設施）。 如何在grouped_collection_select中調用它？

到目前為止，在一個新呼叫中，我能夠選擇區域，然后僅在from字段中顯示該區域的設施（被調用transfer_from_id）。 在編輯呼叫並嘗試更改設施時，系統會向我顯示按地區分組的設施的完整列表，而不僅僅是該地區的設施。 如果要縮小范圍，則必須更改區域，然后將其更改回原始，以使特定區域的設施僅顯示出來。

我認為我在此方面取得了進展，但並沒有達到我想要的方式。 我很樂於接受更有意義，更清晰的答案。