如何使用 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)?

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

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

CSS

app/assets/stylesheets/custom.css.scss

@import "bootstrap";

.popover { max-width: none; }

JS

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 包,但有些东西需要初始化。

我找到了这个 link 但它不包含 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 的问题部分,但没有找到任何可以帮助我的东西。

我会继续寻找。

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