[Rails] セレクトボックス select 要素の削除・追加が行われない

Question

#一部解決したので明日以降改定します。

前提・実現したいこと

問題点の主旨

Railsで製品の口コミアプリを開発中です。
口コミ投稿機能を実装中に、Ajaxで通信後の処理が実行されない原因を解明してoption要素の削除・追加したいです。

######学習歴
・CS基礎(キタミ式イラストIT塾 基本情報技術者)
・Linux基礎(Linux標準教科書)
・HTML/CSS/JavaScript基礎(ドットインストール)
・Railsチュートリアル 2週程度

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

期待する動作

'/reviews/new'ページ

ブランド名(セレクトボックス)で項目選択
↓
選択したブランドに 該当する製品のみ を選択できるようにする。

下記画像で言い換えますと、

↓画像1:投稿画面を開いた直後

↓画像2:ブランド名選択後

↓画像3:product-1 のプルダウンをクリック後

ここでは本来"product-1"が一つだけ表示されれば意図した動作になります。

仮説

大きく分けて二つの問題が原因で実装が進展していないと考えます。

• 問題A： Ajaxで通信が成功した後の処理が実行されない

• 問題B： 上記処理で、option要素追加を実行するコマンドを抽象的にかけない

該当のソースコード

app/javascript/packs/application.js

/* setting */
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()
require("jquery/src/jquery")
import "bootstrap"

/* post form */
/* select Product form after choosing Brand */
$(document).on('turbolinks:load', function () {
  $(function () {
    var selectField = $('.js-select_field').on('change', function (){
    var brand_id = selectField.val();
    $.ajax({
      type: 'GET', // リクエストのタイプ
      url: '/reviews/picks', // リクエストを送信するURL
      data:  { brand_id: brand_id }, // サーバーに送信するデータ
      dataType: 'json' // サーバーから返却される型
    })
    .done(function (data) {
      $('#review_product_id').children().remove(); //製品選択肢を削除
      $(data).each(function(i,review) {
      $('.js-receive_field').append(
        $("<option>").val(i).text(review.brands.name));
        });
      });
    });
  });
});

####Controller
app/controllers/reviews/picks_controller.rb

class Reviews::PicksController < ApplicationController
  def index
    @reviews = Review.find(params[:brand_id])
    respond_to do |format| # リクエスト形式によって処理を切り分ける
      format.html { redirect_to :root } # html形式の場合
      format.json { render json: @reviews } # json形式の場合
    end
  end
end

config/routes.rb

Rails.application.routes.draw do
  devise_for :users, controllers: { registrations: 'users/registrations', sessions: 'users/sessions', users: 'users' }
  root 'pages#index'
  get '/about', to: 'pages#about'
  get '/contact', to: 'pages#contact'
  resources :users, only: [:index, :show]
  namespace :reviews do 
    resources :picks, only: :index, defaults: { format: :json }
  end
  resources :reviews, only: [:create, :destroy, :new]
	resources :products
	resources :brands

  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

app/controllers/reviews_controller.rb

class ReviewsController < ApplicationController
  before_action :authenticate_user!, only:[:create, :destroy, :new]
  before_action :correct_user, only:[:destroy]
  
  def create
    @review = current_user.reviews.build(review_params)
    if @review.save
      redirect_to root_url
    else 
      render 'pages/show'
    end
  end

  private
    def review_params
      params.require(:review).permit(:content, :user_id, :product_id)
    end
    
    def correct_user
      @review = current_user.reviews.find_by(id: params[:id])
      redirect_to root_url unless current_user
    end
end

#####Model

• ER図 (関連するところを抜粋)

db/schema.rb(一部省略)

 
 create_table "brands", charset: "utf8mb4", force: :cascade do |t|
    t.string "name"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "products", charset: "utf8mb4", force: :cascade do |t|
    t.string "name"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.bigint "brand_id", null: false
    t.index ["brand_id"], name: "index_products_on_brand_id"
  end

  create_table "reviews", charset: "utf8mb4", force: :cascade do |t|
    t.text "content"
    t.bigint "user_id", null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.bigint "product_id", null: false
    t.index ["product_id"], name: "index_reviews_on_product_id"
    t.index ["user_id", "created_at"], name: "index_reviews_on_user_id_and_created_at"
    t.index ["user_id"], name: "index_reviews_on_user_id"
  end

  create_table "users", charset: "utf8mb4", force: :cascade do |t|
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.string "name"
  end

  add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
  add_foreign_key "active_storage_variant_records", "active_storage_blobs", column: "blob_id"
  add_foreign_key "products", "brands"
  add_foreign_key "reviews", "products"
  add_foreign_key "reviews", "users"
end

app/models/review.rb

class Review < ApplicationRecord
  belongs_to :user
  belongs_to :product
  validates :user_id, presence: true
  validates :product_id, presence: true
  validates :content, presence: true, length: { maximum: 140 }
end

app/models/product.rb

class Product < ApplicationRecord
  has_many :reviews
  belongs_to :brand
  has_one_attached :image
  validates :brand_id, presence: true
  validates :name, presence: true
  validates :soc_antutu_score, presence: true
  validates :battery_capacity, presence: true
end

app/models/brand.rb

class Brand < ApplicationRecord
  has_many :products
  has_one_attached :image
  validates :name, presence: true, \
    uniqueness: true, length: {maximum: 50}
end

Views

app/views/layouts/application.html.slim

doctype html
html
  head
    title
      | hello app
    meta[name="viewport" content="width=device-width,initial-scale=1"]
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'
    
  body
    header
      (省略)
    = yield
    = debug(params) if Rails.env.development?

app/views/reviews/new.html.slim

h1 投稿画面
= render 'reviews/form'

app/views/reviews/_form.html.slim

.container
  .row
    .col-12.col-md-6.offset-md-3
      .card.px-3.my-3
        = form_with(model: @review, local: true) do |f|
          = render 'devise/shared/error_messages', object: f.object
          
          .field.py-3
            = f.collection_select(:brand_id, @brands, :id, :name, {prompt: "ブランド名"}, {class: "js-select_field form-control"})
 
          .field.pb-3
            = f.collection_select(:product_id, @products, :id, :name, {}, {class: "js-receive_field form-control"})
          
          .field.pb-3
            = f.text_area :content, placeholder: "Write down some comment.", class: "form-control" 
          .d-grid
            = f.submit "Post", class: "btn btn-primary mb-3"

試したこと

・(Adblockerなど)ブラウザ側でjavaScriptがブロックされていないか？
=> 確認済。ブロック停止状態になっています。

自分で入力した jQuery のプログラムを、ブラウザーのコンソールから実行しました。セレクター・メソッドが適切か調べるためです。

・option要素が消えるか確認

$('#review_product_id').children().remove(); //製品選択肢を削除
#=> option要素が消えることを確認

・option要素の追加はできるのか確認
動的に追加するために抽象的にすると分からなくなったので、value・文章を指定してoption要素を追加する方法を確認しました。

(function() {
  $('.js-receive_field').append(
    $("<option>").val("1").text("select-1"));
 });
#=> <option value="1">select-1</option>が追加されるのを確認。

・function(data)の data の中身を確認しました。

$(document).on('turbolinks:load', function () {
  $(function () {
    var selectField = $('.js-select_field').on('change', function (){
    var brand_id = selectField.val();
    $.ajax({
      type: 'GET', // リクエストのタイプ
      url: '/reviews/picks', // リクエストを送信するURL
      data:  { brand_id: brand_id }, // サーバーに送信するデータ
      dataType: 'json' // サーバーから返却される型
    })
    .done(function (data) {
      console.log(data); // dataを確認する
    });
});
});

product_id が確認できるので、これを基にしてproductの名前を追加できないかなと思いました。

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

今回初質問です。アドバイス・質問の仕方などで不適切な点ございましたら、ご遠慮なくご指摘いただけましたら幸いです。

環境等

・AWS Cloud9 (Ubuntu 18.04.5 LTS, Bionic Beaver)
・Rails 6.1.3.1
・Ruby 2.6.6p146
・Bundler version 2.0.2
・gem 3.0.8

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'rails', '~> 6.1.2', '>= 6.1.2.1'
gem 'mysql2', '~> 0.5'
gem 'dotenv-rails'
gem 'puma', '~> 5.0'
gem 'sass-rails', '>= 6'
gem 'webpacker', '~> 5.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.7'

gem 'bootsnap', '>= 1.4.4', require: false

gem 'html2slim'
gem 'slim-rails'

gem 'bootstrap', '~> 5.0.0.beta1'
gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.7'

gem 'devise', '~> 4.7', '>= 4.7.3'

gem 'active_storage_validations'
gem 'image_processing'
gem 'mini_magick'

gem 'pry-rails'
gem 'pry-byebug', '~> 3.7'

gem 'faker', '~> 2.16'

gem 'mimemagic', '~> 0.4.3'

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

####参考にしたURL

• ベースに進めたサイト

・【Rails】Ajaxチュートリアル(Rails + jQuery)~処理の流れを理解しよう！

• jQuery

・ jQuery でセレクトボックスのプルダウン項目（option 要素）を追加／削除する方法

• Rails Ajax

・【Rails】セレクトボックスの選択によって動的に変化するコンテンツの実装
・selectとoptionタグをjQueryを使って動的に追加する