質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • Ruby on Rails

    8834questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ajax

    1323questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Rails4 AJAX通信selectbox

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 800

smith

score 161

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


イメージ説明



#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)


  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kuboon

    2015/04/10 15:42

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

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

    キャンセル

  • smith

    2015/04/20 11:38

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

    キャンセル

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • Ruby on Rails

    8834questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ajax

    1323questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。