Rails4 AJAX通信selectbox

Question

親カテゴリを選択すると子カテゴリが選択できないtextのような表示になってしまいます。
そのままsubmitを押してvalidateで戻ってくると
ただしくselectboxとして表示されます。
親カテゴリを選択したタイミングでただしくselectboxとして表示させるにはどうしたら良いでしょうか

![イメージ説明]WIDTH:589

#Item controller

def new
    @item = current_user.items.build
  end

  def create
    @item = current_user.items.build(item_params)
    respond_to do |format|
      if @item.save
        format.html { redirect_to @item, notice: 'アイテムを登録しました' }

        format.json { render :show, status: :created, location: @item }
      else

        format.html { render :new }
        format.json { render json: @item.errors, status: :unprocessable_entity }
      end
    end
  end

#Item view

 <div class="form-group">
          <label for="category" class="col-sm-3 control-label">カテゴリ&ensp;<span class="text-danger glyphicon glyphicon-asterisk"></span></label>
          <div class="col-sm-9 col-md-3 col-lg-3">
            <%= f.select :category_id, category_collection(Category.find_by_name('root')), {:include_blank =>  '選択してください'}, {class: 'form-control select select-default category-select'} %>
          </div>
        </div>


        <div class="form-group">
          <label for="sub_category" class="col-sm-3 control-label">サブカテゴリ&ensp;<span class="text-danger glyphicon glyphicon-asterisk"></span></label>
          <div class="col-sm-9 col-md-3 col-lg-3">
            <%= f.select :sub_category_id, category_collection(item.category), {:include_blank =>  '選択してください'}, {class: 'form-control select select-default sub-category-select'} %>
          </div>
        </div>


# Item model
class Item < ActiveRecord::Base
  belongs_to :category
  belongs_to :sub_category, class_name: 'Category', foreign_key: :sub_category_id
end

class Category < ActiveRecord::Base
  has_many :items
  has_many :sub_categories, ->{ order(:code) }, class_name: 'Category', foreign_key: 'parent_id'
  belongs_to :categories, class_name: 'Category', foreign_key: 'parent_id'
end

#AJAX
$ ->
  do ->
    appendOptions = ($select, results) ->
      option = $('<option>')
      $select.append(option)
      $.each results, ->
        option = $('<option>')
        option.val(this.id)
        option.text(this.name)
        $select.append(option)

    replaceSubCategoryOptions = ->
      url = $(@).find('option:selected').data().subCategoriesPath
      $select = $(@).closest('form').find('.sub-category-select')
      if url?
        $.ajax
          url: url
          dataType: "json"
          success: (results) ->
            $('.field-sub-category').toggle(results.length > 0)
            $select.empty()
            appendOptions($select, results)
      else
        $('.field-sub-category').hide()
        $select.empty()

    $('.category-select').change(replaceSubCategoryOptions)

#Category helper
module CategoriesHelper
  def category_collection(category)
    (category.try(:sub_categories) || []).map do |c|
      [c.name, c.id, { data: { sub_categories_path: category_sub_categories_path(c) } }]
    end
  end
end

#ルーティング
resources :categories, only: [] do
    get :sub_categories
end

サーバログ
Started GET "/categories/6/sub_categories" for 127.0.0.1 at 2015-04-09 19:08:13 +0900
Processing by CategoriesController#sub_categories as JSON
Parameters: {"category_id"=>"6"}
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."deleted_at" IS NULL AND "users"."id" = 1 ORDER BY "users"."id" ASC LIMIT 1
Category Load (0.2ms) SELECT "categories".* FROM "categories" WHERE "categories"."name" = 'root' LIMIT 1
Category Load (0.1ms) SELECT "categories".* FROM "categories" WHERE "categories"."id" = ? LIMIT 1 [["id", 6]]
Category Load (0.1ms) SELECT "categories".* FROM "categories" WHERE "categories"."parent_id" = ? ORDER BY "categories"."code" ASC [["parent_id", 6]]
Completed 200 OK in 25ms (Views: 3.1ms | ActiveRecord: 0.6ms)

seeds.rb
#親カテゴリ
Category.create(:name => 'root', :code => 000000, :parent_id => 0)
Category.create(:name => 'メンズ', :code => 100000, :parent_id => 1)#2
Category.create(:name => 'レディース', :code => 200000, :parent_id => 1)#3
Category.create(:name => 'キッズ', :code => 300000, :parent_id => 1)#4
Category.create(:name => 'インテリア', :code => 400000, :parent_id => 1)#5
Category.create(:name => '家電製品', :code => 500000, :parent_id => 1)#6
Category.create(:name => '本', :code => 600000, :parent_id => 1)#7
Category.create(:name => 'チケット', :code => 700000, :parent_id => 1)#8
Category.create(:name => 'おもちゃ', :code => 800000, :parent_id => 1)#9
Category.create(:name => 'エンターテインメント', :code => 900000, :parent_id => 1)#10
Category.create(:name => 'スポーツ', :code => 1000000, :parent_id => 1)#11

#メンズ子カテゴリ
Category.create(:name => 'トップス', :code => 100100, :parent_id => 2)
Category.create(:name => 'アウター', :code => 100200, :parent_id => 2)
Category.create(:name => 'パンツ', :code => 100300, :parent_id => 2)
Category.create(:name => '靴', :code => 100400, :parent_id => 2)
Category.create(:name => '帽子', :code => 100500, :parent_id => 2)
Category.create(:name => 'その他', :code => 100600, :parent_id => 2)

#レディース子カテゴリ
Category.create(:name => 'トップス', :code => 200100, :parent_id => 3)
Category.create(:name => 'アウター', :code => 200200, :parent_id => 3)
Category.create(:name => 'パンツ', :code => 200300, :parent_id => 3)
Category.create(:name => '靴', :code => 200400, :parent_id => 3)
Category.create(:name => '帽子', :code => 200500, :parent_id => 3)
Category.create(:name => 'その他', :code => 200600, :parent_id => 3)

Comments

[kuboon]

> $select.empty()
> appendOptions($select, results)

この empty は期待通り機能していますか？
この時点での results の内容をチェックしてもらえますか？

[smith]

select2を使っていたのが原因でした。

Answer 1

セレクトボックスにSelect2を使用していたため