Best practice on Javascript and rails

rubyonrails-talk
1

Hi, I get constantly nervy whenever trying to implement any javascript / jquery in rails, basically because I'm not sure where to put things in the project!

I know the people at rails have thought long and hard about how to best structure an app, so I'd like to learn the correct way.

I'm using rails 3.2, ruby 1.9.3

///////////// 1st situation - using a gem to include a javascript package :

By default now I notice this is included in the gemfile : gem 'jquery-rails'

there's also these lines in application.js //= require jquery //= require jquery_ujs

and there's this in my layout view

<%= javascript_include_tag "application" %>

do I have to do anything at all to use jQuery in my application? If I want to use some jQuery on a page, where's the place to put it? in the controller.js.coffee? Or on the page between <script> and </script> can I use js / jquery in this strange .coffee file?

////////////// 2nd situation - now I want to use JQUery-UI

What is the best way to use jQuery UI, and where should I put it.

I downloaded the minimised version from jQuery website, but which folder do I put it in? public/...? What am I meant to add to application.js? and do I need to add anything extra to the layout?

////////// 3rd Situation - now I want to use the jQuery-ui CSS to make it look nice

Do I link to the online page at http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css in my layout, pulling in the css dynamically or copy and paste that to a file and include it in the project? if I include this in the project where do I put it? Do I need to add anything to application.css, and or my layout?

That's enough for now! I know these questions might seem a bit pointless, but I want to know the right way to do this. I had an app looking and functioning perfectly on my local system, but then when I uploaded it to heroku all jquery-ui stuff and some of the css didn't work, even after a 'rake assets:precompile' I've now got a project with lots of extra includes, and js / css files repeated in different places just to get it to work on heroku.

Very annoying, and I'm sure if I just knew the right way to organise everything it'd be much easier.

Thanks

2

This might not be what you’re looking for but I’d start by reading up on the Asset Pipeline. Then there are useful railscasts on both subjects.

3

Hi, I get constantly nervy whenever trying to implement any javascript / jquery in rails, basically because I'm not sure where to put things in the project!

I know the people at rails have thought long and hard about how to best structure an app, so I'd like to learn the correct way.

I'm using rails 3.2, ruby 1.9.3

///////////// 1st situation - using a gem to include a javascript package :

By default now I notice this is included in the gemfile : gem 'jquery-rails'

there's also these lines in application.js //= require jquery //= require jquery_ujs

and there's this in my layout view

<%= javascript_include_tag "application" %>

do I have to do anything at all to use jQuery in my application? If I want to use some jQuery on a page, where's the place to put it? in the controller.js.coffee? Or on the page between <script> and </script> can I use js / jquery in this strange .coffee file?

coffeescript compiles to javascript. If you don't want to use coffee script (I'd give it a go if I were you) rename controller.js.coffee to just controller.js. Be aware that (by default at least) all of those js files will be loaded together, so make sure the code you write there won't interfere with pages it's not supposed to act on (it's up to you to come up with something to handle this)

////////////// 2nd situation - now I want to use JQUery-UI

What is the best way to use jQuery UI, and where should I put it.

I downloaded the minimised version from jQuery website, but which folder do I put it in? public/...? What am I meant to add to application.js? and do I need to add anything extra to the layout?

////////// 3rd Situation - now I want to use the jQuery-ui CSS to make it look nice

I use the gem 'jquery-ui-rails' for the last 2. As you might imagine it vendors jquery ui but it splits it up so that you only load the components you need, i.e. you can stick in your application.js

//= require jquery.ui.tabs

and it will only load that bit (it knows about dependencies and will pull in whatever bits of jquery-ui are needed to make ui.tabs work. This gem does the same for stylesheets too, you can add

/* *= require jquery.ui.tabs *= require jquery.ui.slider */

to your css manifest to only include those bits.