はじめに

個人制作でファッション系ECサイトを制作した時に「階層のあるカラム」を実装したいと思い、まさにそれを実現してくれるancestryを使用した時のちょっとしたつまづきから学んだことを備忘録として残しておきます。

また、本記事は手順書ではなく、初学者が陥りがちな失敗の紹介です！

※実装の手順等は割愛します。Qiitaにもたくさん他の方の記事があるので以下参考にしていただければと思います。
ancestryによる多階層構造データを用いて、動的カテゴリーセレクトボックスを実現する~Ajax~
ancestryで作ったセレクトボックスに初期値を表示する方法

実現したいこと

ancestryを用いた以下の動的なセレクトボックスを編集時も有効にしたいです。

前提

以下のようにコントローラーで子階層をsearchするアクションを定義していることが前提です。
ajaxもしっかりsearch_childを定義しておきます。

(controllers/items_controller.rb)

（省略）

  def edit
    child_category = @item.category

    @category_parent_ary = []
    Category.where(ancestry: nil).each do |parent|
      @category_parent_ary << parent
    end

    @category_children_ary = []
    Category.where(ancestry: child_category.ancestry).each do |children|
      @category_children_ary << children
    end
  end

  def search_child
    respond_to do |format|
      format.html
      format.json do
        @children = Category.find(params[:parent_id]).children
      end
    end
  end

（省略）

end

(省略)

  $("#parent-form").on("change", function() {
    var parentValue = document.getElementById("parent-form").value;
    if (parentValue != "---") {
      $('#category__box--children').remove();
      $.ajax({
        url     : 'search_child',
        type    : 'GET',
        data    : { parent_id: parentValue },
        dataType: 'json'
      })

(省略)

編集時にサーチしてくれない！？

諸々、実装して新規登録ではできているし、おそらく問題ないだろうと思っていたので、フリーズしました。

解決

すごく単純で、ルーティングを追加しただけです。

(config/routes.rb)
Rails.application.routes.draw do

（省略）

  resources :shops, only: [:new, :create, :show, :edit, :update, :destroy] do
    resources :items, only: [:new, :create, :edit, :update, :destroy] do
      collection do
        get "search_child", defaults: { format: "json" }
      end
     #####↓ここを追加↓＃＃＃＃
      member do
        get "search_child", defaults: { format: "json" }
      end
    #####↑ここを追加↑＃＃＃＃
    end
(省略)

教訓

ついつい１機能の実装範囲が膨らむと足元をすくわれがちで、今回のエラーも書いたコードの内容ばかりに目がいってしまい、それなりに時間を溶かしました。。

改めて動作するまでのコードの流れをちゃんと理解して疑いの目を向けることが大事だなと、反省です！