現在こちらを参考に、ajax通信で多階層カテゴリを作ろうとしています
指定したid(親要素)にイベントが発生すると、発火するようにしているのですが、コンソールで以下のエラーが起こり、ajax通信に失敗します
ajax通信を成功させたいです
同じような実装を3箇所実装しようとしているのですが、2箇所はうまくいき1箇所でエラーです
jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:10255 GET http://localhost:3000/forecasts/new 404 (Not Found)
####調べたこと
ターボリンクスについて jsファイルの先頭にターボリンクスを読み込ませる記述をしたが解消されず
NetWorkを確認
エラーが起きるjs
Request URL: http://localhost:3000/forecasts/new Request Method: GET Status Code: 404 Not Found Remote Address: [::1]:3000 Referrer Policy: strict-origin-when-cross-origin
正常に動くjs
Request URL: http://localhost:3000/tweets/new?tournament_id=1 Request Method: GET Status Code: 304 Not Modified Remote Address: [::1]:3000 Referrer Policy: strict-origin-when-cross-origin
####関係ありそうなファイル
Js
$(document).on('turbolinks:load', (function(){ function appendOption(category) { let html = `<option value="${category.id}" data-category="${category.id}">${category.name}</option>`; return html; } function appendChildrenBox(insertHTML) { let childSelectHtml = ""; childSelectHtml = `<p>勝利予想</p> <select name="forecast[win_school_id]" class="tournament_select_child" id="children_category"> <option value="" data-category="" >勝つと思う学校を選択してください</option> ${insertHTML}</select>` $(".win-school").append(childSelectHtml) childSelectHtml2 = `<p>敗退予想</p> <select name="forecast[lose_school_id]" class="tournament_select_child" id="children_category"> <option value="" data-category="" >負けると思う学校を選択してください</option> ${insertHTML}</select>` $(".lose-school").append(childSelectHtml2) } $("#parent_category_forecast").on("change",function(){ let parentCategory = $("parent_category_forecast").val(); if(parentCategory !=""){ $.ajax({ type: "GET", url: "/forecasts/new", data: {tournament_id: parentCategory}, dataType: "json" }) .done(function(children){ $(".win-school").empty(); $(".lose-school").empty(); let insertHTML = ""; children.forEach(function(child){ insertHTML += appendOption(child); }); appendChildrenBox(insertHTML); }) .fail(function(){ alert("error: 取得に失敗") }) } }); }));
コントローラー
class ForecastsController < ApplicationController before_action :set_category, only: [:new] def index @tweets = Forecast.includes(:user).page(params[:page]).per(5).order("created_at DESC") end def new @forecast = Forecast.new respond_to do |format| format.html format.json do @category_children = Category.find(params[:tournament_id]).children end end end private def set_category @category_parent_array = Category.where(ancestry: nil) end end
html
<div class="contents-fs"> <div class="form"> <%= form_with model: @forecast,local: true do |f| %> <h2> 投稿する <h2> <%=f.select :tournament_id, options_for_select( @category_parent_array.map{|c| [c[:name], c[:id]]},selected: @forecast.tournament_id),{include_blank:"大会を選択してください"}, { class: "parent_category_box", id: "parent_category_forecast"} %> <div class="win-school"></div> <div class="lose-school"></div> <%= f.text_area :text,cols: 30,rows: 10,value: "#{@forecast.text}"%> <%=f.submit value: "SENT",class: "game_record"%> <% end %> </div> </div>
json.jbuilder
json.array! @category_children do |child| json.id child.id json.name child.name end
###追記
ルーティング
Rails.application.routes.draw do root 'tops#index' devise_for :users resources :tweets do resources :comments,only:[:create,:destroy] resources :likes,only:[:create,:destroy] collection do get :search end end resources :tournaments,only:[:show] do member do get "watch" get "watch_avg" end end resources :analyses,only:[:index,:new,:create,:destroy,:edit,:update] resources :forecasts,only:[:index,:new,:create] resources :tops,only:[:index] end
コントローラー
class ForecastsController < ApplicationController before_action :set_category, only: [:new] def index @tweets = Forecast.includes(:user).page(params[:page]).per(5).order("created_at DESC") end def new @forecast = Forecast.new respond_to do |format| format.html format.json do @category_children = Category.find(params[:tournament_id]).children end end end private def set_category @category_parent_array = Category.where(ancestry: nil) end end
ターミナルのエラー
カテゴリにidが見つからない コントローラーに問題?
ActiveRecord::RecordNotFound (Couldn't find Category without an ID):
#解決
id(#)の指定忘れ
JSファイルでイベントがあったところのvalを取ってくる記述でidを指定するはずが、$("parent_category_forecast")でなっておりidでもクラスでもなかった
皆様ありがとうございました
$("#parent_category_forecast").on("change",function(){ let parentCategory = $("parent_category_forecast").val();
修正
$("#parent_category_forecast").on("change",function(){ let parentCategory = $("#parent_category_forecast").val();
回答1件
あなたの回答
tips
プレビュー