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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

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

JavaScript

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

jQuery

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

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

受付中

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

miisha002
miisha002

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

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

JavaScript

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

jQuery

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

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

0回答

0リアクション

0クリップ

790閲覧

投稿2021/04/28 13:07

編集2021/04/30 15:57

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

前提・実現したいこと

問題点の主旨

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

ruby

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

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(一部省略)

ruby

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

ruby

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

Gemfile

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を使って動的に追加する

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

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

JavaScript

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

jQuery

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

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。