I have just upgraded to Rails 3.1, and I am having an issue with loading my Javascripts with the new asset pipeline.
I have copied the js files (both the files themselves and their .min variants) into my /app/assets/javascripts directory, and my application.js manifest is as follows:
//= require jquery
//= require jquery_ujs
//= require jquery-easytabs
//= require jquery-hashchange.min
//= require_tree .
But this does not appear to be working; Easytabs is not being loaded correctly. Strangely, when I look in the console at the application.js file that is compiled, I can see the Easytabs code, but it is not working.
I have found that if i paste the code directly into the application.js file, it works as expected, so I know that the script is working. This is not, however, the intended use of the application.js file.
I would appreciate any guidance on where to go next in order to ensure the correct loading of the js files.
Thanks!
Try moving all your plugins (like easytabs) into the vendor directory.
vendor/assets/javascripts/
Then change your application.js file to this:
//= require jquery
//= require jquery_ujs
//= require_tree ../../../vendor/assets/javascripts
//= require_tree .
You should (if you aks me) only place code that you have written for a specific controller in your app/assets/javascripts directory, everything else, like plugins should go in the vendors dir.
I managed to get to the bottom of this - it seems that the require order is alphabetical, so jquery_easytabs was getting compiled before jquery_ujs. I fixed this by renaming to jquery_zeasytabs - not the cleanest, but it does work.
Related
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 created a site and some javascript and css files that I only use on one site (they would disturb functions on other sites), but I don't know how to exclude the files from the asset pipeline.
In the asset javascript folder I created a new folder called paint that contains all javascript files I don't want to load on all sites. But only on one specific site.
Also I created a folder in assets stylesheetsy directory for the stylesheet I only need on the specific site.
My application.js looks like this:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require fancybox
//= require_tree .
//= require bootstrap-datepicker
//= require_self
I hope somebody can help me! Thanks
Remove this line
//= require_tree .
And require only the files that you need
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).
Man, WTH is going on with this stuff. You know what that line actually does in Rails 3.1?
<script src="/assets/defaults.js" type="text/javascript"></script>
As they say on ESPN, "Come on, man."
I know that assets are no longer treated as second-class citizens. But it seems as if they are unable to even receive a green card in this release candidate. In the new app/assets/javascripts/application.js:
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
Sooooo. Am I supposed to download jquery? What do I do? Because there's nothing in that javascripts directory except application.js.
Aggravating. And yet it's free, so how am I complaining? Anyway, these issues seem pretty basic, but I would appreciate any help you can offer.
In Rails 3.1 there is no longer a "defaults" as such, but rather what is specified in your application.js file are the "defaults". You would include this file using this line:
javascript_include_tag "application"
The jquery and jquery_ujs files come with the jquery-rails gem which is in the default Rails 3.1 Gemfile.
The //= require line in that file tells Sprockets that you want to require a file which in this case would be jquery.js from within jquery-rails, where the //= require_tree . will require all other JavaScript files in the same directory as application.js and concatenate them all into one file.
You can read more about the asset pipeline here.