Question

我正在尝试使用三种模型构建一个RoR应用程序：

可以归类为扇区（称为GameSector）和子扇区（称为GameSubsector）的游戏
一个部门由许多子部门组成。
一个分部门。

以下是我的基本模型关系：

模型/ game.rb

belongs_to :game_sector,    :foreign_key => 'game_sector_id',   :counter_cache => true
belongs_to :game_subsector, :foreign_key => 'game_subsector_id',:counter_cache => true

我使用Active Admin输入游戏，部门或子部门的信息。

当我创建一个游戏时，我有一个非常基本的形式，我只想让第二个选择下拉（game_subsector）调整第一个选择（gamesector）的选择，这样我就不是整个（很长）game_subsectors列表，但只包括属于我选择的game_sector的那些。

经过几十次测试和技术尝试但失败后，我终于使用了与我相关的开发人员建议：http://samuelmullen.com/2011/02/dynamic-dropdowns-with-rails-jquery-and-ajax/。

但它仍然不起作用。

以下是Active Admin的表单，该表单位于admin / game.rb

ActiveAdmin.register Game do

  menu :parent => "Campaigns", :priority => 1

  controller do 
    with_role :admin_user      

      def game_subsectors_by_game_sector
      if params[:id].present?
        @game_subsectors = GameSector.find(params[:id]).game_subsectors
      else
        @game_subsectors = []
      end

      respond_to do |format|
        format.js
      end
    end

  end


form do |f|

    f.inputs "Details" do
      f.input :name
      f.input :game_sector_id,
        :label => "Select industry:",
        :as => :select, :collection => GameSector.all(:order => :name),
        :input_html => { :rel => "/game_sectors/game_subsectors_by_game_sector" }
      f.input :game_subsector_id, :as => :select, :collection => GameSubsector.all(:order => :name)

f.actions
  end

我觉得javascript甚至可能没有被解雇。

我使用的jquery位于app/assets/javascript/admin/active_admin.js（我更改了配置，因此在加载活动管理页面时会加载此javascript）

jQuery.ajaxSetup({
  'beforeSend': function(xhr) { xhr.setRequestHeader("Accept", "text/javascript"); }
});

$.fn.subSelectWithAjax = function() {
  var that = this;

  this.change(function() {
    $.post(that.attr('rel'), {id: that.val()}, null, "script");
  });
};

$("#game_game_sector_id").subSelectWithAjax(); //it it found in my view???

最后我创建了一个视图this expert adviced：在app / views / layout / game_subsectors_by_game_sector.js.erb

$("#game_game_subsector_id").html('&lt;%= options_for_select(@game_subsectors.map {|sc| [sc.name, sc.id]}).gsub(/n/, '') %&gt;');

我不确定我是否在正确的地方出来......

Answer 1

您需要的是：

使用您的网络浏览器控制台检查您的选择，并使用CSS选择器为扇区选择创建一个jQuery对象，如：
```
$('#sector_select')
```

向此对象追加一个处理程序，因此当它更改时，会触发AJAX请求：

$('#sector_select').change(function(){
  $.ajax('/subsectors/for_select', {sector_id: $(this).val()})
    .done(function(response){ // 3. populate subsector select
      $('#subsector_select').html(response);
    });
});

在代码中查看3，您需要检查以获得正确的CSS选择器。确保您在Web浏览器检查器的“网络”选项卡中获得了预期的响应（如果使用Chrome）。

您需要一个能够在文件/subsectors/for_select中app/controllers/subsectors_controller.rb内回答的控制器：

class SubsectorsController  < ApplicationController
  def for_select
    @subsectors = Subsector.where sector_id: params[:sector_id]
  end
end

您需要一个视图，该视图返回要填充的选项app/views/subsectors/for_select.html.erb：
```
<% @subsectors.each do |ss| %>
  <option value="<%= ss.id %>"><%= ss.name %></option>
<% end %>
```

您需要一条路线：

get '/subsectors/for_select', to: 'subsectors#for_select'

在Active Admin上的依赖选择下拉列表中找不到错误（Rails 3.2，Active Admin 1.0）

1 个答案: