如何使用 gem bootstrap-sass (Bootstrap 2) 在 Rails 4.2.5 中编写弹出框？答案

【问题标题】：How Do I Code a Popover in Rails 4.2.5 Using gem bootstrap-sass (Bootstrap 2)?如何使用 gem bootstrap-sass (Bootstrap 2) 在 Rails 4.2.5 中编写弹出框？
【发布时间】：2016-02-23 01:16:40
【问题描述】：

由于安全更新，我正在将 Rails 4.2.2 应用程序重写为 Rails 4.2.5。我在 4.2.2 应用程序中运行 Ruby 2.2.2。在 4.2.2 应用程序中，我将 gem twitter-bootstrap-rails 用于 Bootstrap 2。不幸的是，由于 Ruby 错误，我不能再在 Rails 4.2.5 中使用该版本的 gem。我在 GitHub 上提交了一个问题，但没有人回复。我决定将我的应用程序升级到 Ruby 2.3.0 和 Rails 4.2.5.1，并为 Bootstrap 2 使用最新版本的 gem bootstrap-sass。

在我使用 gem twitter-bootstrap-rails 的旧应用程序中，我的代码成功地将部分显示为弹出框。下面的代码示例在我使用 bootstrap-sass 的 4.2.5 应用程序中。

CSS

app/assets/stylesheets/custom.css.scss

@import "bootstrap";

.popover { max-width: none; }

app/assets/javascripts/bootstrap.js.coffee (created by gem twitter-bootstrap-rails)

jQuery ->
  $(".popover-map").popover({ html : true })
  # $("a[rel~=popover], .has-popover").popover()

app/assets/javascripts/application.js 

//= require bootstrap

Rails 部分代码

<%= link_to("#{t :map_marfa_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_marfa_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_marfa'}") %>

我检查了 Rails 部分代码所在页面的源代码，发现以下错误。

TypeError: $(".popover-map").popover is not a function. (In '$(".popover-map").popover({
      html: true
    })', '$(".popover-map").popover' is undefined)
(anonymous function)bootstrap.self-a54a326f6cd027d08c61488151646f3b32c14ca968788b351d38b24c02b72000.js:2
firejquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js:3232
fireWithjquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js:3362
readyjquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js:3582
completedjquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js:3617

似乎 popover 函数未定义，但我不太确定错误的措辞方式。如何在 Rails 中包含弹出框脚本？我需要在我的样式表中添加额外的导入语句还是需要创建一个 popover.js/popover.js.coffee/popover.coffee 文件？ bootstrap-sass gem GitHub 文档说默认包含整个 Bootstrap 包，但有些东西需要初始化。

我找到了这个链接，但它不包含 Rails 特定信息。

http://www.w3resource.com/twitter-bootstrap/popover-tutorial.php

更新 2016 年 2 月 23 日上午 10:55 CST

我决定将以下语句添加到 app/assets/javascripts/bootstrap.js.coffee，因为通常这段代码可以工作。

$("a[rel=popover]").popover()

不幸的是，我在此声明中也遇到了以下错误。

TypeError: $("a[rel=popover]").popover is not a function. (In '$("a[rel=popover]").popover()', '$("a[rel=popover]").popover' is undefined)
(anonymous function)bootstrap.self-dd0727b0d7b4d50d5415be2857e6060f1fc2b8a195352a28af1f44d5b97ec59c.js:2
firejquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js:3232
fireWithjquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js:3362
readyjquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js:3582
completedjquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js:3617

在 Rails 中使用 bootstrap-sass 时，我仍在寻找有关此错误的帖子。我在 GitHub 文档和问题部分中搜索了 gem，并没有发现任何对我有帮助的东西。

我会继续寻找。

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap css sass popover

【解决方案1】：

在我最初尝试将 twitter-bootstrap-rails 与 Ruby 2.2.2 和 Rails 4.2.5 一起使用后，我看到了 Ruby 的安全更新。我将 Ruby 升级到 2.3.0。我在 GitHub 上提交了这个问题，但从未分配过。由于没有人回应，我决定再次尝试 twitter-bootstrap-rails 并且弹出框像以前一样工作。 Bootstrap 2 的 bootstrap-sass 似乎不再具有弹出框或工具提示的脚本。

【讨论】：