CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrappopovertwitter-bootstrap-rails
user1676463
user1676463

Reputation: 65

Bootstrap popover not working Rails

I am having trouble with getting my bootstrap popover to work correctly in my rails application. I have tried solutions to other questions with no success.

Currently in my HTML I have: 

<i class="icon-exclamation-sign" id="info" rel="popover" data-content="some info"></i>

and 

<script>  
$(function () {
  $(".icon-exclamation-sign").popover();  
});  
</script>

My application.js looks like: 

//= require jquery
//= require jquery_ujs
//= require bootstrap-datepicker
//= require_tree .
//= require bootstrap-tooltip
//= require bootstrap-popover

and my application.css looks like:

/*
*= require_tree .
*= require bootstrap-datepicker
*/

And I get the error: Uncaught TypeError: Object [object Object] has no method 'popover' when loading the page. What am I doing wrong?

EDIT: Also I have tried just using require bootstrap instead of tooltip and popover in my application.js with no luck.

Upvotes: 2

Views: 5158

Answers (3)

user1676463
user1676463

Reputation: 65

I finally figured out the problem by following the advice here.

I had to add the line to my development.rb file:

config.serve_static_assets = false

Upvotes: 1

Jonny Wright
Jonny Wright

Reputation: 83

Try the rake assets:clean command. This should delete any legacy JS/CSS that hasn't picked up your changes.

With most browsers you can view the source of the page to check the versions of the the asset files it's using, see if your changes are being picked up in there and if they aren't, this might work.

Upvotes: 0

mind.blank
mind.blank

Reputation: 4880

Try putting the code under /app/assets/javascripts/ and see if it changes anything.

/javascripts/some_name.js

$(document).ready(function() {
  $(".icon-exclamation-sign").popover();
});

Actually I think the problem is that //= require_tree . should be last, try the following:

//= require jquery
//= require jquery_ujs
//= require bootstrap-datepicker
//= require bootstrap-tooltip
//= require bootstrap-popover
//= require_tree .

Same for application.css

Upvotes: 3

Related Questions