前提・実現したいこと
現在、フリマの仮装アプリを制作しております。
商品編集ページの実装ですが
カテゴリーが呼び込めません。
自分の中で
色んな記事を噛み砕いた内容になってますが、記述ミス、いらない内容あるかもです。
(カテゴリーと画像の導入以外のjsは触ってない箇所もあります)
■商品編集機能実装中にカテゴリーの機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
ActiveRecord::RecordNotFound in ProductionsController#edit Couldn't find Category without an ID
該当のソースコード
production_controller.rb def edit @production = Production.find(params[:id]) @category = Category.where(ancestry: "") ~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~ end category.js $(document).ready(function(){ $(function(){ function appendOption(category){ var html = `<option value="${category.id}" data-category="${category.id}">${category.name}</option>`; return html; } // 子カテゴリーの表示作成 function appendChidrenBox(insertHTML){ var childSelectHtml = ''; childSelectHtml = `<div class='exhibitionPage__main__contents__detail__category__choose__added' id= 'children_wrapper'> <div class='exhibitionPage__main__contents__detail__category__choose1'> <i class='fas fa-chevron-down exhibitionPage__main__contents__detail__category__choose--arrow-down'></i> <select class="exhibitionPage__main__contents__detail__category__choose--select" id="child_category" name="production[category_id]"> <option value="---" data-category="---">---</option> ${insertHTML} <select> </div> </div>`; $('.products_new-product_explanation__category').append(childSelectHtml); } // 孫カテゴリーの表示作成 function appendGrandchidrenBox(insertHTML){ var grandchildSelectHtml = ''; grandchildSelectHtml = `<div class='exhibitionPage__main__contents__detail__category__choose__added' id= 'grandchildren_wrapper'> <div class='exhibitionPage__main__contents__detail__category__choose2'> <i class='fas fa-chevron-down exhibitionPage__main__contents__detail__category__choose--arrow-down'></i> <select class="exhibitionPage__main__contents__detail__category__choose__box--select" id="grandchild_category" name="production[category_id]"> <option value="---" data-category="---">---</option> ${insertHTML} </select> </div> </div>`; $('.products_new-product_explanation__category').append(grandchildSelectHtml); } // 親カテゴリー選択後のイベント // 親はクラスのIDの方を選択してあげる $('#production_category').on('change', function(){ var parent_category_id = document.getElementById('production_category').value; //選択された親カテゴリーの名前を取得 if (parent_category_id != "選択してください"){ //親カテゴリーが初期値でないことを確認 $.ajax({ url: '/productions/category/get_category_children', type: 'GET', data: { parent_id: parent_category_id }, dataType: 'json' }) .done(function(children){ $('#children_wrapper').remove(); //親が変更された時、子以下を削除する $('#grandchildren_wrapper').remove(); var insertHTML = ''; children.forEach(function(child){ insertHTML += appendOption(child); }); appendChidrenBox(insertHTML); }) .fail(function(){ alert('カテゴリー取得に失敗しました'); }) }else{ $('#children_wrapper').remove(); //親カテゴリーが初期値になった時、子以下を削除する $('#child_category').remove(); } }); // 子カテゴリー選択後のイベント // これは元々HTMLに表示されているクラスをレシーバーとして指定する必要がある $('.products_new-product_explanation__category').on('change', '#child_category', function(){ var child_category_id = $('#child_category option:selected').data('category'); //選択された子カテゴリーのidを取得 if (child_category_id != "--"){ //子カテゴリーが初期値でないことを確認 $.ajax({ url: '/productions/category/get_category_grandchildren', type: 'GET', data: { child_id: child_category_id }, dataType: 'json' }) .done(function(grandchildren){ if (grandchildren.length != 0) { $('#grandchildren_wrapper').remove(); //子が変更された時、孫以下を削除する var insertHTML = ''; grandchildren.forEach(function(grandchild){ insertHTML += appendOption(grandchild); }); appendGrandchidrenBox(insertHTML); } }) .fail(function(){ alert('カテゴリー取得に失敗しました'); }) }else{ $('#grandchildren_wrapper').remove(); //子カテゴリーが初期値になった時、孫以下を削除する } }); }); }); vies/production/edit.html.haml ~~~~~~~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .category-wrapper = form_with model: @production :@category, local: true do |f| = f.label :category_id , class: 'wrapper__label category-wrapper-label', id: "wrapper__label--category" do カテゴリー: %span.required ※必須 .category-wrapper-box .category-wrapper-select .category-wrapper-select__box = f.collection_select :category_id, Category.roots, :id, :name, {selected:@production.category.parent.parent.name}, { class: 'category-wrapper__category form-control', id: 'parent_category_edit', name: "" } .category-wrapper-select#children_wrapper .category-wrapper-select__box = f.collection_select :category_id, @production.category.parent.parent.children, :id, :name{prompt: "選択してください", selected: @production.category.parent_id}, {class: 'listing-select-wrapper--edit__child--select', id: 'child_category_edit', name: "" } .category-wrapper-select__box = f.collection_select :category_id, @production.category.parent.children, :id, :name,{prompt: "選択してください", selected: @production.category.id}, {class: 'listing-select-wrapper--edit__grandchild--select', id: 'grandchild_category_edit', name: "product[category_id]" } ~~~~~~~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ get_category_children.json.jbuilder json.array! @category_children do |child| json.id child.id json.name child.name end get_category_grandchildren.json.jbuilder json.array! @category_grandchildren do |grandchild| json.id grandchild.id json.name grandchild.name end
試したこと
付与した、クラスの名前
記述ミスないか
@production(:category_id)or@production(:category.id)
など、思いつくことは行ったのですが、うまくいかないのでご教授いただけると幸いです!!汗
補足情報(FW/ツールのバージョンなど)
rails 6.0.0
ここにより詳細な情報を記載してください。