Which of the following way is faster and best to add jquery file,
add jquery file into project with link like below,
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
download jquery file and then add that local file.
In your gemfile:
#Rails jQuery
gem 'jquery-rails'
In assets/javascriptapplication.js
//= require jquery3
or
//= require jquery2
Using CDN, it will be faster but will be slower for the first time(if not loaded already). Once CDN is loaded, it will always run faster.
But there is a drawback of CDN if the host removes that file that will give raise to error of JQuery not found. To avoid that using gem or downloading is preferred.
Conclusion: both ways have their pros and cons you have to pick one yourself.
Related
Rails 4.2.4
Ruby 2.1.2
I am trying to use twitter-bootstrap-rails.
I would like to use it by the same way I am using jquery-rails
assets/applications.js
//= require jquery
In this case I don't need to copy any jquery.js or jquery.css files to my project because Rails fetches it for me form gem.
The different situation is with twitter-bootstrap-rails.
In the guide
The Twitter Bootstrap Rails gem can provide the Bootstrap stylesheets
in two ways.
The plain CSS way is how Bootstrap is provided on the official
website.
The Less way provides more customization options, like changing theme
colors, and provides useful Less mixins for your code, but requires
the Less gem and the Ruby Racer Javascript runtime (not available on
Microsoft Windows).
Seems the first way is more suitable for me. But in this case I should use the generator rails generate bootstrap:install static before to use any twitter-bootstrap .js or .css files. The generator fetches the files into assets folder of my project.
So I am looking for a way how to use twitter-bootstrap-rails .js and .css files in my project without copying them into my project folder. I just would like to add twitter-bootstrap-rails files just putting for instance line //= require bootstrap into application.js.
Thanks a lot.
Instead of using twitter-bootstap-rails, use bootstrap-sass.
In your application.js, add the following:
//= require bootstrap-sprockets
change application.css to application.scss and add:
#import "bootstrap-sprockets";
#import "bootstrap";
and you're good to go. Oh. Just please don't forget to restart your server.
I'm guessing this is a silly question, but i'm a bit of a newb...
I've added the chosen gem to my rails app by adding it to my Gemfile and requiring chosen-jquery in my application.js file.
My question is: where can i find the actual javascript file for chosen? Is it downloading it automatically?
Simply include the JS and CSS files like described in the documentation on the main page of the Github project and it will be included when precompiling your assets. The files are not within your project directory but rather within the gem and will be resolved by the pipeline when the gem is included.
If you need to get to the file directly (for modifications), you need to put the JS in there manually. You can then still include it in the main application.js for the pipeline and have better control of the version in use. To me, this is the preferred method.
However, may I suggest switching to Select2 which is originally based on Chosen but under much more active development and better documentation:
http://ivaynberg.github.io/select2/
https://github.com/ivaynberg/select2
There's also a gem for it if you like:
https://github.com/argerim/select2-rails
It's in a gem itself. If you look at vendor/assets/javascripts in gem root, you'll see all javascripts that come with chosen gem. They are added by assets pipeline, with
//= require chosen-jquery
line in your application.js.
Look up your assets load path. Like this:
in terminal cd to your app root
then open rails console
then run Rails.application.config.assets.paths
Your chosen-jquery is in one of those folders.
I have a Rails 3.2.9 app using jquery mobile.
I use the jquery_mobile_rails gem to embed jqm and the mobylette gem to detect when requests come from a mobile device.
All works ok in development environment (Webrick)
The production env is based on apache/passenger.
when I run rake assets:precompile all seems to go well,
and if I look at assets/manifest.yml I can see that all seems ok.
When I invoke the welcome page the login form is sent to the browser,
but while in development env the page has all the jqm formats,
in production the html is not "injected" with the needed JQM code,
so for example the tag is simply
<body>
instead of
<body class="ui-mobile-viewport ui-overlay-c">
So it seems that after loading the page, the javascript that should run and "enrich" the html with JQM specific code is not triggered.
Any hint about why this is happening?
EDIT
assets
javascripts
application.js
mobile
application.js
views
layouts
application.html.erb
application.mobile.erb
manifest files are:
javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_directory .
javascripts/mobile/application.js
//= require jquery.mobile
//= require_directory .
In case you would like to include a bunch of files from a particular directory (or a library ) ,you can use index manifest file (look for 2.1.2). It is really simple:
in your directory (app/assets/javascripts/mobile) create a file index.js with content :
//= require_self
//= require other_files_you_want
(and optionaly):
//= require_tree .
then in your application.js manifest file you can require the library with the name of the directory , in which you have created the index.js file :
//= require mobile
I would suggest, when you pass these steps, to remove the file app/assets/javascripts/mobile/application.js. It is not a good style in one app to have more than one file with the name application.js.
EDIT (after taking a look at the application.css):
I would suggest a couple of corrections in your manifest file application.css:
move the css code in a new file (for example app/assets/stylesheets/custom.css.scss)
if there are others css libs that you use , include them like normal (*= require your_css) in your application.css.
The problem was due to an incompatibility between the last versions of jquery and jquery mobile.
jquery mobile 1.2.0 released Oct 2 2012 has problems with last jquery version 1.9.x.
Specifically, jquery 1.9 removed the $.browser method, which is used in jquery mobile 1.2.0.
So when jqwery mobile tries to initialize objects on the page it dies with the error
TypeError: 'undefined' is not an object (evaluating 'e.browser.msie')
I solved the problem by forcing the use of jquery 1.8.3; in Gemfile
gem 'jquery-rails', '~> 2.1.4'
which includes jquery 1.8.3 in the assets pipeline.
Without web inspector on the BB Z10 (or remote debug function on android 4 devices) I would have never been able to detect such javascript problem on the mobile platform.
As a final tought, BlackBerry Z10 Web Inspector works via Wi-Fi, while Android devices need an USB connection to have remote debug work.
Does Jquery have to be manually included in rails? Or is it a default? I see in the asset pipeline manifest:
require jquery
require jquery-ujs
It doesn't have to be included, but it will be included unless you remove it. Most applications will benefit from it being present, but if you don't use JavaScript in any of your views, you could always leave it out.
I wanted to know if it's possible to include an external file in the application.js file so it gets combined with the rest of the .js files in the apps/assets/javascript folder
Is there a way to get the following code work in the application.js file:
//= require 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'
or something :p
Why would you want to do that? The whole idea of using a CDN is not to load content from your server but other content server. If you would like it to be compiled, just download it to the app/assets/javascripts directory and require it. It is much cleaner that way.