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

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

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

CentOSは、主にRed Hat Enterprise Linux(RHEL)をベースにした、フリーのソフトウェアオペレーティングシステムです。

Ruby on Rails 5

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

Q&A

0回答

517閲覧

railsアプリでjqueryが上手く機能しない

totoro-

総合スコア9

CentOS

CentOSは、主にRed Hat Enterprise Linux(RHEL)をベースにした、フリーのソフトウェアオペレーティングシステムです。

Ruby on Rails 5

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

0グッド

0クリップ

投稿2020/05/22 11:17

編集2022/01/12 10:55

すみません、質問なんですけどrailsアプリでjqueryが上手く機能しません。

環境は

ruby '2.7.1'
rails', '5.2.4'
centos7

で試しています。

ナビゲーションバーをブートストラップを使って作りたいのですが、jqueryが上手く機能していないためにドロップダウン等の機能が上手く作動しません。
gemや設定ファイルに問題があるのでしょうか?

gemfile

ruby '2.7.1' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.2.4', '>= 5.2.4.2' # Use mysql as the database for Active Record gem 'mysql2', '>= 0.4.4', '< 0.6.0' # Use Puma as the app server gem 'puma', '~> 3.11' # Use SCSS for stylesheets #gem 'sass-rails', '~> 5.0' gem 'sassc-rails' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'mini_racer', platforms: :ruby # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 4.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use ActiveStorage variant # gem 'mini_magick', '~> 4.8' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', '>= 1.1.0', require: false group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end group :development do # Access an interactive console on exception pages or by calling 'console' anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '>= 3.0.5', '< 3.2' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] gem 'bootstrap', '~> 4.4.1' gem 'jquery-rails' gem 'kaminari' gem 'ransack' gem 'bootstrap-sass' gem 'jquery-ui-rails' gem 'materialize-sass' # Chart.js(グラフ表示) gem 'chart-js-rails' # flatpickr(カレンダー) gem 'flatpickr' # Gon(コントローラから Javascript に変数を渡せるようにする) gem 'gon' gem "chartkick" gem 'groupdate'

application.jsファイルは

//= require chartkick //= require Chart.bundle //= require bootstrap // = require rails-ujs // = require activestorage //= require Chart.min //= require flatpickr //= require flatpickr/l10n/ja //= require jquery //= require jquery-rails //= require popper //= require bootstrap-sprockets // = require turbolinks // = require_tree .

application.scssは

/* ... *= require flatpickr *= require flatpickr/themes/material_blue */ @import "bootstrap";

application.html.erbは

<!DOCTYPE html> <html> <head> <title>Testcall</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <%= javascript_include_tag 'application','data-turbolinks-track': 'reload' %> </head> <body> <div class="text-center"> <!DOCTYPE html> <html> <head> </head> <body> <%= pie_chart Test.group(:sgw_count).count %> </body> </html> <%= yield %> </div> </div> </body> </html>

こうなっています。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/05/22 11:21 編集

これを第三者がどう評価すればいいのですか? 「railsアプリでjqueryが上手く機能しません」うまく機能する状態はどういう状態で、今どういう状態なのですか?
退会済みユーザー

退会済みユーザー

2020/05/22 11:26

jQueryはrubyもrailsも関係なく、webブラウザ上のjsとして動作するものなので、webブラウザ上に出力されたhtmlソースが狙った通りの出力になっているかどうかを確認しましょう。htmlの文法エラーを引き起こしているとjQueryだって混乱するでしょうし。
totoro-

2020/05/22 11:40

詳しくありがとうございます。 確認してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問