为什么我在Rails 6中的引导程序不起作用

Question

我想在我的Rails应用程序中有一个模式/弹出窗口。最终，即使使用幻灯片/旋转木马。我遵循了一些教程，但都不起作用。例如：CrashingChandelier。此外，堆栈溢出的许多问题也没有帮助，因为它们大多处理js文件。

本课程说，它可以在不使用Javascript文件的情况下使用Bootstrap模态。虽然它应该很简单，但我无法修复它，也不知道如何调试它。所以请帮助我。

这是带有按钮和模式的index.html.erb。

<!-- BUTTON -->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<!--MODAL-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="pull-left"><h4>Your picture gallery</h4></div>
<button type="button" class="close" data-dismiss="modal" title="Close">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="modal-body">
<p>hello, world!</p>
</div><!--end modal-body-->
<div class="modal-footer">
<div class="pull-left">
</div>
<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialoge-->
</div><!--end myModal-->

这是我的应用程序。scss

/*
*
*/
@import "bootstrap-sprockets";
@import "bootstrap";

这是我的应用程序.js:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

这是我的Gemfile：

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
# Database
# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'
# Server
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Layout
gem 'bootstrap-sass', '3.4.1'
gem 'jquery-rails'
# Popups
gem 'popper_js'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Manipulate images
gem 'image_processing',           '1.9.3'
gem 'mini_magick',                '4.9.5'
# Security
# Use Active Model has_secure_password
gem 'bcrypt'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# 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.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', 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.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
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
gem 'minitest'
gem 'minitest-reporters'
gem 'guard'
gem 'guard-minitest'
gem 'rails-controller-testing'
end
group :production do
gem "aws-sdk-s3", require: false
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

如果我把'<div class="；模态衰落"；id＝"；myModal">'在CCD_ 1中我可以看到模态。关闭按钮不起作用。

似乎这一切都必须足以获得至少一个弹出/模式

编辑：也许javascript有问题？

我把视图中的<script> function myFunction() { alert(“Alert!”); } </script>，以检查javascript是否工作并且什么都没有发生。

有人能告诉我如何让javascript工作吗？

Answer 1

如果您正在使用Rails6，请不要使用

gem 'bootstrap-sass', '3.4.1'
gem 'jquery-rails'

您需要通过yarn和webpacker安装引导程序方法如下：

1. 控制台：

yarn add jquery popper.js bootstrap
mkdir app/javascript/stylesheets
echo > app/javascript/stylesheets/application.scss

2. 环境.js：

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment

3. 在application.html.erb中添加(而不是替换(：

= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 

4. application.js：

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
require("stylesheets/application.scss")

现在，您可以转到bootstrap docs/modals并复制粘贴一个modal，它就可以工作了。

源

2021年6月更新：Bootstrap 5+Rails 6

控制台

yarn add bootstrap@next
yarn add @popperjs/core

application.js

import 'bootstrap/dist/js/bootstrap'
import "bootstrap/dist/css/bootstrap";

不需要其他任何东西。就是这样！