Using Google CDN with the sprockets assets compiler - ruby-on-rails-3

This seems quite trivial but couldnt find it in the forums or rails asset pipeline guides.
In short
How can I inform sprockets to skip the asset pipeline for the jquery ui css of the 'jquery-rails' gem.
In long:
I am trying to use 'jquery-rails' gems with the Google jquery CDN's.
Hence in the I am just including the jquery_ujs and adding the jquery related scripts in the application layout:
application.js.erb:
//= require bootstrap-twipsy.js
//= require jquery-glowing
//= require jquery_ujs
application.html.erb:
= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jqueryui.min.js"
For the css', I am not including the jquery-ui css in the application.css and adding it in the layouts file too.
application.css.scss.erb:
*= require_directory .
*= require active_scaffold
*= require_self
In production environment, the compiled css file includes the jquery-css code too, since its in the assets pipeline of the 'jquery-rails' gem.
So how can I inform sprockets to skip the asset pipeline for the jquery ui css of the 'jquery-rails' gem.
If this is not possible in rails, what is the best way to handle this sittuation.
I thought about removing the jquery-rails gem, and adding the jquery_ujs javascript manually to the system, but then I have to deal with the installation of new releases rather than executing a simple 'bundle update'
Thanks in advance,

The problem is in the active_scaffold gem, right here if you want the code reference. It includes the jquery-ui CSS.
To remove this you'll need to replicate the entire active scaffold css code in your app/assets/stylsheets folder (as my_active_scaffold), removing the link to jquery-ui. I am assuming that the ActiveScaffold erb at the end of the file will still run in this context.
Then just include it:
*= require my_active_scaffold

Related

Debug jQueryUI Versions in Rails

Within my Rails project, my old jQuery code for sorting a list of <li> elements has broken. The logged error is:
TypeError: $.ui.isOverAxis is not a function
I think the culprit is that an unwanted, older version of jquery-ui.js (v1.9.2) is making it into my headers, and I don't know how to remove it.
The unwanted jQuery file is originating from the jquery-rails gem. I don't understand why, since I've removed the //= require jquery-ui line from my application.js file.
Here is my current application.js file:
//= require moment.min.js
//= require nicEdit.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require_tree .
My Gemfile is updated to the most recent versions of the jquery-rails gem (2.2.1) and the jquery-ui-rails gem (4.0.3).
Yet an older version of jquery (1.9.2) appears in my header files in development mode:
<script type="text/javascript" src="/assets/jquery-ui.js?body=1"></script>
Through debugging in development mode, I can tell that the jquery-ui.js file comes from the jquery-rails gem.
Any suggestions on how to fix this?
UPDATE
I have updated the question to reflect my discovery that the jquery-ui.js file is, in fact, coming from the jquery-rails gem.
It appears that ActiveAdmin is calling //= require jquery-ui, which is in turn pulling in the jquery-ui.js file from jquery-rails.
That file is clobbering the version of jQueryUI from jquery-ui-rails.
The long-term solution might be for jquery-rails to remove the jquery-ui.js file, or at least rename it.
In the short-term, I solved my problem by removing //= require jquery.ui.all and relying entirely on jquery-rails, skipping jquery-ui-rails altogether.

Twitter bootstrap: do I need both bootstrap-sass and twitter-bootstrap-rails gems?

I have the following entries my (Rails 3.2.13) Gemfile:
gem 'twitter-bootstrap-rails'
gem 'bootstrap-sass'
and in app/assets/javascripts/application.js:
//= require twitter/bootstrap
and at the top of app/assets/stylesheets/custom.css.scss:
#import 'bootstrap'
Is this "correct"? Do I need both 'twitter-bootstrap-rails' and 'bootstrap-sass' (or maybe 'bootstrap-sass-rails'), or are they redundant and possibly conflicting? Do the 'bootstrap-sass' gems include the javascript for the framework, or only the CSS?
No you do not need both.
Just simply put this in your gemfile:
gem 'sass-rails'
gem 'bootstrap-sass'
This in application.css.scss:
#import 'bootstrap';
#import 'bootstrap-responsive';
This in application.js
//= require bootstrap
If you're still having problems you may need to look at the ordering of things in your manifest files..
If you want to use SASS you should use boostrap-sass or bootstrap-sass-rails. Twitter-bootstrap-rails uses LESS source. If you were to include both there would probably be conflicts. All of them include javascript for bootstrap already and integrate into the asset pipeline.
I personally use LESS version as it is what bootstrap is originally written in. (might get faster releases when bootstrap updates)
It's generally good to check the gems out on github to evaluate your exact needs and which version of Rails they support.

how to include js functions in bootstrap-sass gem

I am relatively new to rails, I found this gem bootstrap-sass which seems to be very nice in the layout. But I want to make the Carousel js plugin work. I found it was documented in the website but I don't quite understand where I need to put
// Loads all Bootstrap javascripts
//= require bootstrap
Thanks,
If you're using rails >= 3.1, add that line to your application.js file (or whatever file you're including in your layout), normally located in app/assets/javascripts
This is my typical base app/assets/javascripts/application.js in any new app.
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap

rails 3.1 upgrade with backbone, can't find ujs and remotipart files

I upgraded to rails 3.1.3 a few weeks ago, and moved a bunch of stuff around to use backbone.
Mostly, things are going well, but I just realized that the rails-ujs.js file and remotipart.js files are not in the assets directory.
I've looked for them in the old public/javascripts folder, as well as everywhere else, but no luck finding them.
I also can't seem to find the files in the git repos. Is there somewhere to download these files in Javascript? or do they need to be generated by rails? Is there a way to regenerate them?
---------------this could be my error ----------------------------
I just realized that with the assets packed, you can't just open a file from view source, they all show as non-existent.
I think theses files lived in the rails ujs plugins in asset directory. so you need to add it to your Gemfile and the asset pipeline should see them automaticaly.
all files here https://github.com/rails/jquery-ujs/tree/master/src are available to include in your js file with
//= require jquery
//= require jquery_ujs
see plugin readme for more informations
You need to include this in your Gemfile:
gem 'jquery-rails'
That is the official plugin for this code.
Run bundle install.
Then you add the lines:
//= require jquery
//= require jquery_ujs
to you application.js file.

What is the purpose of config.assets.precompile?

In Rails 3.1, you must whitelist files that you want included in asset precompilation. You must open up config/environments/production.rb and explicitly include assets you want precompiled:
config.assets.precompile += ['somestylesheet.css']
If you don't do this this and you run rake assets:precompile, your asset will not be copied to public/assets, and your app with raise an exception(therefore causing a 500 error in production) when an asset is not found.
Why is this necessary? Why aren't all assets automatically precompiled?
This current approach creates extra code and stress when deploying. Wouldn't it be easier to blacklist/exclude assets so things worked right out of the box? Anyone else share these feelings?
Most assets are automatically included in asset precompilation. According to the RoR Guide on the Asset Pipeline:
The default matcher for compiling files includes application.js, application.css and all files that do not end in js or css: [ /\w+\.(?!js|css).+/, /application.(css|js)$/ ]
You would use config.assets.precompile if you have additional assets to include:
config.assets.precompile += ['admin.js', 'admin.css', 'swfObject.js']
Or you could overwrite it.
I think it has to do with the pipeline/sprockets ability to require separate files.
For example, I have an admin.js file in my app/assets/javascripts folder. But all it does is require several other .js files.
//= require jquery
//= require jquery_ujs
//= require jquery.colorpicker.js
//= require jquery.wysiwyg.js
//= require wysiwyg.image.js
//= require jquery.fileupload.js
//= require jquery.fileupload-ui.js
//= require codemirror.js
//= require css.js
//= require admin_load
This is because (a) I'm using external js plugins and (b) I like to keep things like jQuery onload handlers in separate files.
If every .js file was precompiled, then it would precompile each one of these individual files–which is totally unnecessary. All I want/need is the single admin.js file precompiled.
Same goes for CSS files.
The assets precompile to me is cool so you dont end up deploying assets that you do not want. Dont also forget about the uglifer gem that helps compress your javascripts. Imaging all this are not existing and you just deploy your app and you find out that you have unused css files and uncompressed javascripts. how would you feel. this is just my own opinion and i say the asset pipeline is the coolest thing in rails.. Being able to manage all your assets properly.
And mind you if i am rails i would not want to compile assets that you would not want so you would say in your mind why did this guy compile these assets.. :)