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
Related
I'm just not sure how to add the javascript and CSS in when the gem I'm using hasn't been updated to use Webpack. I really like this tree view gem, the_sortable_tree, however, I haven't been able to get it to work in Rails 6 because it hasn't been updated. I'm happy to work on getting it up-to-date personally, but I'm not a master of how Ruby gems work--especially now with Webpack(er) in the mix. Anyhow, any ideas on what I need to do in order to leverage both the Rails 6 way of doing things and importing legacy gem code into my Rails 6 app?
In the documentation for the_sortable_tree, it says to add these to your application.js file:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
But I have already added those using yarn so I think they should be good to go.
Then the docs say to add this code for the sortable tree UI:
//= require the_sortable_tree/jquery.ui.nestedSortable
//= require the_sortable_tree/sortable_ui/base
// with Turbolinks
$ ->
TheSortableTree.SortableUI.init()
// with Turbolinks
$(document).on "ready page:load", ->
TheSortableTree.SortableUI.init()
Is there a one-to-one translation for this? Or do the changes that are needed have to be implemented by the gem developer/creator?
How about the CSS? The docs say to add this to application.css:
*= require tree
*= require sortable_tree
*= require nested_options
*= the_sortable_tree/sortable_ui/base
So is there an equivalent in Rails 6? The paths here don't seem to be accessible.
Any help you can provide would be greatly appreciated. If I'm out of luck using this gem, so be it, but I just want to wrap my head around how this all works in general since Webpack(er) seems like such a departure from the old way of doing things that many gems seem to still employ.
Thanks.
I am using bootstrap with Rails.
What's the difference between bootstrap and bootstrap-sprockets? Is sprockets the special version of bootstrap?
The github doc for boostrap-sass explains it:
bootstrap-sprockets and bootstrap should not both be included in
application.js.
bootstrap-sprockets provides individual Bootstrap Javascript files
(alert.js or dropdown.js, for example), while bootstrap provides a
concatenated file containing all Bootstrap Javascripts.
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).
I want to include the chosen library like my other js libraries in my Rails app like this in application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
But I don't know if I just have to type //= require chosen and that's it.
So I tried to find a list of libraries that I can include with sprockets but I got nothing.
You need that javascript library packed as a gem. You're lucky, there is a gem.
Add gem chosen-rails to your Gemfile and run the bundle install-command. Afterwards, you can use //= require chosen-jquery in your application.js-file.
For further information please visit the github homepage of this gem.
To your question. Today it's quite common to pack such librarys as chosen is into a gem. Just search the name of the library you are looking for on http://rubygems.org/ or even google.
If no such gem exists, you could pack one by yourself (see this amazing article) or add the librarys by hand to your vendor-assets directory.