Bootstrap 5在Rails 7应用中的Javascript功能无法使用

Question

Bootstrap 5在Rails 7应用中的Javascript功能无法使用

javascriptruby-on-railsbootstrap-5ruby-on-rails-7

3

我正在尝试搭建我的第一个Rails 7应用程序，并已正确安装Bootstrap 5(可以通过CSS看到)，并摆脱了所有错误消息，但是JavaScript函数 (例如下拉菜单、离线画布等)没有起作用。

我使用以下代码进行测试:

<script>
  $( document ).ready(function() {
    console.log( "document ready!" );
    $( "#TEST" ).click(function() {
      console.log( "clicked!" );
    });
  });
</script>

两个console.log语句都产生了正确的结果，这让我相信js和jquery的工作正常，问题出在bootstrap方面。

以下是我的gemfile：

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

ruby '3.1.0'

# RAILS GENERATED STUFF
gem 'rails', '~> 7.0.1'
gem 'pg', '~> 1.1'
gem 'puma', '~> 5.0'
gem 'sass-rails', '>= 6'
# gem 'webpacker', '~> 5.0'
gem 'jsbundling-rails'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.4', require: false
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

# OTHER NECESSARY STUFF
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'sprockets-rails'
gem 'bcrypt', '~> 3.1.7'
gem 'gon'

# ESSENTIALS
gem 'devise'
gem 'simple_form'
gem 'font_awesome5_rails'
gem 'friendly_id', '~> 5.2.0'
gem 'tinymce-rails'
gem 'invisible_captcha'
gem 'figaro'
gem 'high_voltage', '~> 3.1'
gem 'bootstrap', '~> 5.1', '>= 5.1.3'

# FOR IMAGES
gem 'mini_magick'
gem 'aws-sdk' , '~> 3'
gem 'aws-sdk-s3', require: false

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'pry-rails'
  gem 'better_errors'
end

group :development do
  gem 'web-console', '>= 4.1.0'
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  gem 'spring'
end

group :test do
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver'
  gem 'webdrivers'
end

这是我的应用程序文件 `application.js`，存储在 `javascript/controllers/application.js` 中，但不知何故也存在于 `assets/builds/application.js` 中。我没有使用 webpack，而是安装了 rollup（使用 `$ ./bin/rails javascript:install:rollup`）。

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "controllers"
import 'offcanvas';

//= require jquery3
//= require jquery_ujs
//= require jquery-ui
//= require popper
//= require bootstrap
//= require activestorage
//= require font_awesome5
//= require tinymce



window.jQuery = $;
window.$ = $;

有人能看出我哪里错了吗？

- Liz

你好，出于好奇，你是否成功使用css=bootstrap选项从命令行生成应用程序？我这边一直失败。 - EastsideDev

3个回答

3

我在这方面遇到了一些重大问题。要解决这个问题，请进入app/javascript/application.js并更改以下内容：

import "@hotwired/turbo-rails"

转换为：

import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false

此外，在开发过程中启动Rails服务器时，请始终使用bin/dev而不是rails server命令。

更多信息

请参见此处获取更多信息。

- stevec

1

谢谢，我也遇到了Bootstrap的主要问题。我会阅读Turbo以了解情况。 - Ben

1

@Ben，对我来说修复它也很困难。找出有效的方法花费了三天时间进行艰苦的调试。如果您学到了有助于提高理解或技巧/窍门的东西，请随时在此处分享链接，因为这可能会帮助其他人。 - stevec

1

通过bin/dev启动服务器，问题已解决。谢谢！ - Jason Galvin

谢谢！这对我有用。而且似乎在运行'rails server'时也能正常工作（到目前为止）。 - shoegazerpt

2

请检查您是否使用了正确版本的Bootstrap代码。版本4的标记无法与版本5的Bootstrap兼容。

具体来说，此属性已更改为：

data: { toggle: "dropdown"}

到

data: { "bs-toggle" => "dropdown"}

如果您的“搜索”表单堆叠在一起而不是100％宽度，那么这意味着您可能使用了错误的版本。

它应该看起来像这样：

这是5.3版本的导航栏：https://getbootstrap.com/docs/5.3/components/navbar/

- Mark Swardstrom

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bweathers · Accepted Answer

我也遇到了同样的问题。

我通过在application.html.erb文件的body标签之间添加Bootstrap捆绑脚本来使其工作：

<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <%= yield %>
</body>