Rails动态更改集合在表单中选择基于表单域

时间:2014-08-27 17:44:22

标签: jquery ruby-on-rails-3 forms activerecord collections

我有一个Rails 3.2.14应用程序,用于跟踪呼叫,每个呼叫都有一个来自Facility模型的提取和下降设施,这是一个关联。

在呼叫模型中,区域模型(即休斯顿,达拉斯,奥斯汀等)有一个关联,我们根据呼叫的来源选择一个区域。

我想要做的是能够选择特定区域(即休斯顿),而在拾取设施集合中只显示休斯顿地区的设施。

我假设开始时我需要在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 %>

如果其中任何一项令人困惑或需要澄清,请告知我们。总而言之,我试图选择一个区域(休斯敦),并且只在选择该区域时显示表格中休斯顿地区的设施。

提前感谢您提供的任何帮助或提示。

2 个答案:

答案 0 :(得分:0)

对于这样的事情,我通常通过在客户端加载字典来保持简单,只需引用它。

所以在你看来,你可以建立这样的东西:

<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来猜测。

答案 1 :(得分:0)

基于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' %>

上面的groups_collection_select的问题在于它正在调用:列出所有设施的设施,我需要调用Facility.active的等价物(我在Facility上创建的范围只列出活动设施)。如何在grouped_collection_select中调用它?

到目前为止,在新的通话中,我能够选择该区域,然后该区域的设施仅显示在from字段中(transfer_from_id被调用)。在编辑呼叫并尝试更改设施时,我会提供按地区分组的完整设施列表,而不仅仅是该地区的设施。如果我想缩小范围,我必须更改区域,然后将其更改回原来的特定区域设施,以便单独显示。

我认为我在这方面取得了进展,但它并没有按照我想要的方式进行。我非常愿意接受更有意义且更清晰的答案。