1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Rails]ancestryを使った時のちょっとしたつまづきから学んだこと

Posted at

はじめに

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

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

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

実現したいこと

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

Image from Gyazo

前提

以下のようにコントローラーで子階層を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'
      })

(省略)

編集時にサーチしてくれない!?

Image from Gyazo

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

解決

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

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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?