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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

Q&A

0回答

237閲覧

ancestryカテゴリ機能導入

makoto1026

総合スコア4

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

0グッド

0クリップ

投稿2020/03/17 07:31

前提・実現したいこと

料理投稿アプリを制作中で、rails5.0にancestry3.0.7を導入してカテゴリ機能を実装しようとしています。
まずは記事投稿機能にカテゴリ機能を追加しようとしていますがうまくいきません。
なんとか親カテゴリを投稿ページに表示して選択できるところまでは行ったのですが、そこでもエラーが起き
修正しているうちにどんどんエラーが深くなって行っている気がします・・・。

発生している問題・エラーメッセージ

ArgumentError in Posts#new First argument in form cannot contain nil or be empty

該当のソースコード

[new.html.haml] .post-wrapper .post-wrapper__groups .post-wrapper__groups--text 投稿フォーム = form_for @post do |f| =f.text_field :title, class: "post-wrapper__groups--title", placeholder: " タイトルを入力してください(10文字以内)" =f.text_area :material, class: "post-wrapper__groups--materials", placeholder: " 材料を入力してください" =f.text_area :body, class: "post-wrapper__groups--recipe", placeholder: " レシピを入力してください" = f.file_field :image, class: "post-wrapper__groups--file" = f.submit '送信', class: 'post-wrapper__groups--submit' .listing-form-box .listing-product-detail__category = form_for @category_parent_array do |f| = f.label 'カテゴリー', class: 'listing-default__label' %span.listing-default--require 必須 .listing-select-wrapper .listing-select-wrapper__box = f.select :category, @category_parent_array, {}, {class: 'listing-select-wrapper__box--select', id: 'parent_category'} %i.fas.fa-chevron-down.listing-select-wrapper__box--arrow-down
[post_controller.rb] def new @post = Post.new respond_to do |format| format.html format.json do @category_parent_array = ["---"] Category.where(ancestry: nil).each do |parent| @category_parent_array << parent.name end end end end def category_children @category_children = Category.find_by(name: "#{params[:parent_name]}", ancestry: nil).children end def category_grandchildren @category_grandchildren = Category.find("#{params[:child_id]}").children end
[category.js] $(function(){ // カテゴリーセレクトボックスのオプションを作成 function appendOption(category){ var html = `<option value="${category.name}" data-category="${category.id}">${category.name}</option>`; return html; } // 子カテゴリーの表示作成 function appendChidrenBox(insertHTML){ var childSelectHtml = ''; childSelectHtml = `<div class='listing-select-wrapper__added' id= 'children_wrapper'> <div class='listing-select-wrapper__box'> <select class="listing-select-wrapper__box--select" id="child_category" name="category_id"> <option value="---" data-category="---">---</option> ${insertHTML} <select> <i class='fas fa-chevron-down listing-select-wrapper__box--arrow-down'></i> </div> </div>`; $('.listing-product-detail__category').append(childSelectHtml); } // 孫カテゴリーの表示作成 function appendGrandchidrenBox(insertHTML){ var grandchildSelectHtml = ''; grandchildSelectHtml = `<div class='listing-select-wrapper__added' id= 'grandchildren_wrapper'> <div class='listing-select-wrapper__box'> <select class="listing-select-wrapper__box--select" id="grandchild_category" name="category_id"> <option value="---" data-category="---">---</option> ${insertHTML} </select> <i class='fas fa-chevron-down listing-select-wrapper__box--arrow-down'></i> </div> </div>`; $('.listing-product-detail__category').append(grandchildSelectHtml); } // 親カテゴリー選択後のイベント $('#parent_category').on('change', function(){ var parentCategory = document.getElementById('parent_category').value; //選択された親カテゴリーの名前を取得 if (parentCategory != "---"){ //親カテゴリーが初期値でないことを確認 $.ajax({ url: 'get_category_children', type: 'GET', data: { parent_name: parentCategory }, dataType: 'json' }) .done(function(children){ $('#children_wrapper').remove(); //親が変更された時、子以下を削除するする $('#grandchildren_wrapper').remove(); $('#size_wrapper').remove(); $('#brand_wrapper').remove(); var insertHTML = ''; children.forEach(function(child){ insertHTML += appendOption(child); }); appendChidrenBox(insertHTML); }) .fail(function(){ alert('カテゴリー取得に失敗しました'); }) }else{ $('#children_wrapper').remove(); //親カテゴリーが初期値になった時、子以下を削除するする $('#grandchildren_wrapper').remove(); $('#size_wrapper').remove(); $('#brand_wrapper').remove(); } }); // 子カテゴリー選択後のイベント $('.listing-product-detail__category').on('change', '#child_category', function(){ var childId = $('#child_category option:selected').data('category'); //選択された子カテゴリーのidを取得 if (childId != "---"){ //子カテゴリーが初期値でないことを確認 $.ajax({ url: 'get_category_grandchildren', type: 'GET', data: { child_id: childId }, dataType: 'json' }) .done(function(grandchildren){ if (grandchildren.length != 0) { $('#grandchildren_wrapper').remove(); //子が変更された時、孫以下を削除するする $('#size_wrapper').remove(); $('#brand_wrapper').remove(); var insertHTML = ''; grandchildren.forEach(function(grandchild){ insertHTML += appendOption(grandchild); }); appendGrandchidrenBox(insertHTML); } }) .fail(function(){ alert('カテゴリー取得に失敗しました'); }) }else{ $('#grandchildren_wrapper').remove(); //子カテゴリーが初期値になった時、孫以下を削除する $('#size_wrapper').remove(); $('#brand_wrapper').remove(); } }); });

試したこと

postsコントローラのindexアクションに@category_parent_array = Category.newを定義してみると
今度はundefined method `categories_path'エラーが発生しました。
次から次にエラーが起きるのでゴールにたどり着ける気がしません・・・。
よろしくお願いします。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問