ruby-on-rails - 如何使用 gem bootstrap-sass (Bootstrap 2) 在 Rails 4.2.5 中编写 Popover?

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

由于安全更新,我正在将 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; }

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 脚本?我是否需要在我的样式表中添加额外的导入语句,或者我是否需要创建一个 popover.js/popover.js.coffee/popover.coffee 文件? bootstrap-sass gem GitHub 文档说默认包含整个 Bootstrap 包,但有些东西需要初始化。

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

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

更新 2/23/2016 10:55 am 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 时出现此错误的帖子。我搜索了 gem 的 GitHub 文档和问题部分,但没有找到任何可以帮助我的东西。

我会继续寻找。

最佳答案

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

关于ruby-on-rails - 如何使用 gem bootstrap-sass (Bootstrap 2) 在 Rails 4.2.5 中编写 Popover?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35567046/

相关文章:

ruby-on-rails - 使用acts_as_taggable 在 Ruby on Rails 4 中保存标签时遇到问题

css - Bootstrap 导航栏无法正常工作

css - SVG 动画飞机环绕地球

html - 如何更改按钮悬停属性中的文本颜色

ruby-on-rails - Postgres 排序与 Ruby on Rails 排序

javascript - rails : Server side run HTML and Javascript

html - 如何使 HTML 表格适合提供的空间?

html - 如何让连续的 nowrap 跨度包装为单独的元素?

javascript - 使用 JQuery 或 Javascript 创建选项卡

ruby-on-rails - 已安装但未找到 rvm