i was wondering if someone could help me. my bootstrap drop down menu suddenly stopped working. i have no idea why. it was working before. i didn't touch my views my layouts views so i think the problem is not there. im pretty sure it has to do with my javascript but i dont know where its coming from.
my gem file is...
gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.1'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.5'
gem 'devise'
gem 'carrierwave'
gem 'rmagick'
gem 'delayed_job_active_record'
gem 'daemons'
gem 'make_voteable'
gem 'admin_data'
gem 'indextank'
and my application.js is...
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap-dropdown
//= require bootstrap
//= require_tree .
im guessing maybe it has to do with my config files somehow?
had to move
//= require jquery
below
//= require bootstrap
within
application.js
if precompiling assets does not work try also removing precompiled assets
rake assets:clean
I found that dropdown js being loaded twice into the asset pipeline seems to open and close the dropdown menu instantly, but would work fine in Heroku/Production.
I had the same problem and I found 2 ways to fix it.
First, let me tell you my set up: I followed the instructions at the bootstrap site, and downloaded bootstrap-dropdown.js. I put it in assets/javascripts.
My application.js file looks like this:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
Dropdowns didn't work.
I noticed in the page source that a script tag for bootstrap-dropdown.js appeared twice: (I've removed the irrelevant stuff for brevity)
<script type="text/javascript" src="/assets/jquery.js?body=1">
<script type="text/javascript" src="/assets/jquery_ujs.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/bootstrap.js?body=1">
So I removed the line //= require_tree . from application.js, restarted the server, and the dropdown worked!
Then I put back the line //= require_tree . and instead removed the file assets/bootstrap-dropdown.js, and again it worked!
I don't understand this, but reordering //= require jquery and //= require bootstrap has seemed to fix the problem twice for me. First moving bootstrap above jquery as Sasha suggests fixed it. Then I did more work and prepared to deploy using jruby on rails 3.2.3. Precompile assets, warble, and the dropdowns quit working both in development and production. Delete public/assets, as well as some .class files and files in tmp. No effect. Finally I moved the order in application.js back to what it had been before the last failure episode, i.e. jquery before bootstrap, and dropdowns work again.
Could an alteration to application.js be triggering a rebuild of some cache, or some process behind the scenes that is the source of the problem? Next time this happens, I will try a trivial change to application.js and see if that does anything.
I was experiencing this on my development machine but my production server worked fine.. I noticed that while reordering the js requires in the application.js fixes the problem in development (dropdowns work again), be careful as this killed my dropdowns in production. I had to go back and put them back the way they were to get production working again. For now I am just temporarily changing them in dev when I need to.
Precompiling the assets again fixed the problem for me
I had this problem too...and it was related to rails turbolinks. On initial page load the drop downs would not work, but after a refresh they would. And, this is because with turbo links some Dom elements might not get loaded/reloaded every time. So, my drop down stopped working consistently (among other things). The rails 4 fix for this is to add the jquery.turbolinks gem https://github.com/kossnocorp/jquery.turbolinks. One thing with this gem that I found (and later came across in some blog) is that the javascript tag must be inside the head. The README does not mention this...but
I found a alternative! all of these solutions didnt work for me. Instead of having the dropdown triggered on click, I had it trigger on hover instead. put on bottom of page in script tags. code from: http://codedecoder.wordpress.com/2013/10/21/bootstrap-drop-down-menu-not-working-rails/
$(document).ready(function(){
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});
n})
Also make sure that you don't have //require bootstrap-sprockets inside your application.js. I have commented that and it worked for me.
See Rails 3.1 Assets - Strange Serving in Development
there is a bug where the compressed version is being included in debug mode in application.js
Precompiling assets did not work.
Putting dropdown before jquery worked in development but not in production
Removing dropdown still worked in development :-O
Putting the right order and removing everything in public/assets folder made it work in development.
Ticket #5145 was recently closed for this. The fix was reverted, but an application specific solution was supplied at the end, and works for me. Be sure to clear your browser cache, too.
Moving //= require jquery below //= require bootstrap and upgrading gem 'bootstrap-sass', to 2.3.0.1, solved my problem.
I want to add that solution which i mentioned above works only on Localhost but not on Heroku.
Solution for both in my case was:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
gem bootstrap-sass, 2.3.0.1
and <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> needs to be inside
"_header.html.erb" and delete from "application.html.erb" .
I had this error and it turns out my CSS was preventing the dropdown to work.
Specifically I had 'overflow: hidden;' in my header nav CSS . Removing that solved the issue.
Related
I'm using a bootstrap 3 navbar for a site I'm creating for fun. It looks great but I often run into a bug where the dropdowns won't expand or the collapse button won't work. I'm building it in Rails and added the cdn link to bootstrap.min.js at the bottom of my application.html.erb file.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Am I putting it in the wrong place? Thanks
Have you checked your console? Bootstrap requires JQuery, so it might not be working if you haven't included JQuery as well.
However, in a Rails app people usually use the gem bootstrap-sass to incorporate Bootstrap-3. This gem allows you to include bootstrap in the asset pipeline. It's easier to prioritize the order of your assets when they are all kept within the asset pipeline.
I would strongly recommend using the bootstrap-sass docs to include Bootstrap in your asset pipeline rather than including bootstrap via CDN in your html. The documentation has a step-by-step guide that tells you exactly how to include it, and it's also updated for Rails 5.
One of the benefits of Rails is that it allows you to keep your code very organized, so it's good to include Bootstrap in that organization.
Helpful Resources:
bootstrap-sass
integrating-rails-and-bootstrap
Update
With the bootstrap-sass gem your application.js file should look like this (plus any additional javascripts you might have added):
// app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
Most importantly, it needs these two lines in this order to work:
//= require jquery
//= require bootstrap-sprockets
I am fairly new to Rails and have encountered a problem that I can't understand. I'm trying to add the Trix editor to my application. I installed it with the gem and it worked fine...but only in development. In production it does not load the editor. I can also get it to fail in development if I change:
config.assets.debug = false
in development.rb
I have verified that the code is included in the precompiled .js file. It looks something like:
<script src="/assets/application-xyz" data-turbolinks-track="reload"></script>
The only way I am able to get it to work is by explicitly declaring the Trix CSS and JS file in the header:
<link rel="stylesheet" type="text/css" href="/assets/trix.css">
<script type="text/javascript" src="/assets/trix.js"></script>
I'm confused why that would even work because those files aren't even in the assets folder...perhaps they are automatically added by the gem? Anyway, it works even in production but it seems like a bad idea.
application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require trix
//= require_tree .
Is there any reason why it would appear in the precompiled js file yet not load properly? I'm not sure how to narrow down the source of the error. Is there any way to tell in developer tools whether it's being loaded or whether there is an error?
I realized that your problem is the way you're adding bootstrap to your project, in your assets/stylesheets you have both the unminified and the minified version of those two files, bootstrap.js and bootstrap.css and also you're adding them again to your project in both application.js and application.css files.
What I did was to remove all the css and javascript files that weren't being used, as the duplicated of bootstrap files and scaffold's autogenerated files, and also comment or delete the way you were adding Trix to the project, this way you also have a Trix call in your both application files.
# application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require trix
//= require_tree .
Note there's no Bootstrap call because they're already being loaded with require_tree
# application.scss
/*
*= require trix
*= require_self
*= require_tree .
*/
And also you have Trix added in your Gemfile, so you can call it making a require in your 'assets' application files.
I'm having a problem with two Javascript files used by Isotope (http://isotope.metafizzy.co/) in my /app/assets folder not being found on Heroku. In development mode locally, they are found and everything works fine. However once in production mode on Heroku, the two files aren't there. I've read a lot of similar posts on Stack Overflow and read a lot about the asset pipeline, but I still can't seem to figure out what's causing the problem.
Here's what I know:
1) Other Javascript files in my /app/assets folder are being found, including Bootstrap.
2) If I do rake assets:precompile -trace, I don't get any errors and everything seems normal.
3) In my production.rb file, config.serve_static_assets = true. A lot of people seemed to switch this from false to true and it fixed their issue, but at this point I'm not sure which it should be.
4) This issue might be due to the Isotope Javascript files in question. In one of my html.erb files, I have added some Javascript to do with Isotope as per the developer's docs, like this:
<script src="../assets/jquery-1.7.1.min.js"></script>
<script src="../assets/jquery.isotope.min.js"></script>
<script>
$(function(){
var $container = $('#eventcontainer');
$container.imagesLoaded(function(){
$container.isotope({
layoutMode : 'spineAlign',
spineAlign: {
gutterWidth: 30
},
itemSelector : '.element',
});
});
....... more here that works in dev mode...
</script>
I think the problem results from these two lines:
<script src="../assets/jquery-1.7.1.min.js"></script>
<script src="../assets/jquery.isotope.min.js"></script>
Since if I remove them, my app can't find the Javascript files even when running in development. However, they are included in my application.js file:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery-1.7.1.min
//= require jquery.isotope.min
//= require bootstrap-datepicker
//= require bootstrap-timepicker
//= require_tree .
//= require_self
so I'm not sure why they aren't being found or how to fix the problem. I'm fairly new to Rails and especially to Heroku, so I would really appreciate any help. If you need more info or to see any other files, please let me know.
Thanks for your time!
I was able to resolve this by removing the lines
<script src="../assets/jquery-1.7.1.min.js"></script>
<script src="../assets/jquery.isotope.min.js"></script>
and using info found here: Rails/Heroku precompiled assets not being found. Specifically, the following:
The side note is especially important: "If a
public/assets/manifest.yml is detected in your app, Heroku will assume
you are handling asset compilation yourself and will not attempt to
compile your assets."
Be sure that you remove everything under your public/assets/* folder
that the precompile has created, including that manifest.yml file.
After removing everything in public/assets/* by doing a bundle exec rake assets:clean, I then pushed to Heroku again, allowing it to compile assets itself. At that point it worked. I'm not entirely sure the reasoning, maybe someone could explain it, but to me it seems like once those two lines were removed and all the assets were recompiled, it knew to look in the correct location for the Isotope Javascript files.
I've installed the ckeditor gem and everything is working except for my custom toolbar definition. I'm working in the development environment. Checking the inspector in Chrome I see that my custom.js file is being requested BEFORE the ckeditor gem's config and as a result is probably being overwritten. I think I found a crappy solution here, but I was wondering if anyone else has found a better solution.
Here is a sample of my current application.js config:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require ckeditor/init
//= require_tree ./ckeditor
//= require_directory .
I have the config.js file nested in assets-javascripts-ckeditor. I am also using the parameter :ckeditor => {:uiColor => "#D6A11A", :toolbar => "admin"} in my cktext_area form method. I know it is being read because the uiColor changes accordingly.
I never really figured this one out. Upgrading to the latest version of ckeditor-rails gem and following all of the installation instructions to the letter has fixed this issue. Also, if you have any custom .js config files used by ckeditor, make sure you add them to your precompile assets paths in application.rb.
I'm trying to integrate bootstrap into a current rails project and am having a difficult type installing. Specifically, I seem to be having a problem with the javascript. I have added to application.js:
//= require bootstrap
But I get the following error:
These are referenced in bootstrap.js.coffee and I can get rid of the errors by clearing this file out. Here are the contents:
jQuery ->
$("a[rel=popover]").popover()
$(".tooltip").tooltip()
$("a[rel=tooltip]").tooltip()
There is discussion about loading the individual modules but it's not clear to me if I should be doing this or whether I need to be doing this. https://github.com/thomas-mcdonald/bootstrap-sass
I'd really like to be able to add bootstrap to this currently existing project. Any help is appreciated.
thx
You should make sure you have bootstrap.js or bootstrap.min.js from the Twitter Bootstrap Docs and then require it as you did. I think your issue is that you have yet another file named bootstrap.js.coffee. Try changing the name of it and requiring it along with //=require bootstrap.
First of all bootstrap requires jQuery. For Rails you can use the jquery-rails gem which provides the latest version of jQuery.
Then within your application.js you can load the required Javascripts with
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require_self
As neon mentions the load order of the scripts is important. You should load jquery first, then load bootstrap. At this point you can load all other scripts in the current directory with require_tree . (which probably contains your bootstrap.js.coffee).