すみません、質問なんですけど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>
こうなっています。
あなたの回答
tips
プレビュー