Recently, I made the decision to upgrade my Rails 4.2.2 application to Rails 4.2.5 due to a security update. The previous version was running on Ruby 2.2.2 and utilized the gem twitter-bootstrap-rails for Bootstrap 2. However, I encountered a Ruby error when trying to use this gem with Rails 4.2.5. Despite submitting an issue on GitHub, I received no response. This prompted me to transition my application to Ruby 2.3.0 and Rails 4.2.5.1, while also switching to the latest version of the gem bootstrap-sass for Bootstrap 2.
My old application, which used the gem twitter-bootstrap-rails, had code that successfully showed a partial as a popover. The code snippets below demonstrate how I achieved this in my 4.2.5 application with bootstrap-sass.
CSS
app/assets/stylesheets/custom.css.scss
@import "bootstrap";
.popover { max-width: none; }
JS
app/assets/javascripts/bootstrap.js.coffee (generated 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 partial code
<%= 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'}") %>
Upon inspecting the page source where my Rails partial code was located, I noticed the following error.
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
It seems that the popover function is undefined, but the error message is unclear. How can I integrate the popover script in Rails? Do I need to include an additional import statement in my stylesheet or create a popover.js/popover.js.coffee/popover.coffee file? According to the bootstrap-sass gem documentation on GitHub, the entire Bootstrap package is included by default, but some components require initialization.
I came across this link, but it lacks Rails-specific information.
UPDATE 2/23/2016 10:55 am CST
To address this, I added the following statement to app/assets/javascripts/bootstrap.js.coffee, assuming it would work as intended.
$("a[rel=popover]").popover()
However, this addition resulted in the following error.
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
I am still seeking solutions for this issue while using bootstrap-sass in Rails. Despite thorough searches through the gem's GitHub documentation and issues, I have yet to find a resolution.
I will continue to search for answers.