javascript - 在 Active Admin 上的依赖选择下拉列表中找不到错误(Rails 3.2、Active Admin 1.0)

Question

我正在尝试构建一个具有三个模型的 RoR 应用程序:

• 可分为扇区(称为 GameSector)和子扇区(称为 GameSubsector)的游戏
• 一个部门由许多子部门组成。
• 子部门。

这是我的基本模型关系:

models/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???

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

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

不过我不确定我是否将其放在正确的位置...

Answer 1

您需要的是:

1. 使用 Web 浏览器控制台检查您的选择，并使用 CSS 选择器为扇区选择创建一个 jQuery 对象，如下所示:

   $('#sector_select')
   

2. 向该对象附加一个处理程序，因此当它更改时会触发 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. 请参阅代码中的 3，您需要检查以获得正确的 CSS 选择器。确保您在网络浏览器检查器的“网络”选项卡中获得预期的响应(如果使用 Chrome)。

4. 您需要一个在 app/controllers/subsectors_controller.rb 文件中的 /subsectors/for_select 中进行应答的 Controller :

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

5. 您需要一个返回要填充的选项的 View app/views/subsectors/for_select.html.erb:

   <% @subsectors.each do |ss| %>
     <option value="<%= ss.id %>"><%= ss.name %></option>
   <% end %>
   

6. 您需要一条路线:

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