はじめに
個人制作でファッション系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
(省略)
教訓
ついつい1機能の実装範囲が膨らむと足元をすくわれがちで、今回のエラーも書いたコードの内容ばかりに目がいってしまい、それなりに時間を溶かしました。。
改めて動作するまでのコードの流れをちゃんと理解して疑いの目を向けることが大事だなと、反省です!