How to properly work with jQuery in Rails 3.1 asset pipeline?

Question

I'm working on a hobby app and using some jQuery. The results are fine at the moment, but I'm a jQuery noob and I assume that there are some significant improvements that I can make to the code structure. Putting aside Coffescript for the moment, one thing that I've been wondering is how to properly use the model-specific .js files in the asset pipeline.

For example, when working with my User model, I may have some code that I want to have run when the document is ready. Let's say I put that in $(document).ready(function() {...}); in the users.js file generated by Rails 3.1.

The next day, I'm working with the Pet model and I have code that I want to run with the document is ready. I put that in another $(document).ready(function() {...}); inside of the pets.js file that Rails prepares.

Here's where my questions arise:

1. How does that compile when the app runs?
2. Am I instantiating two jQuery instances with the example above?
3. Should I only use $(document).ready(function() {...}); once in the app or does Rails compile my code into a single call?
4. What belongs in the model-specific .js files?
5. Are there differences between how it will execute in development and production modes?

Answer 1

1) Compilation: Rails assets pipeline just combines all javascript files in one big file.

2) jquery is only loaded once, you are having multiple $(document).ready functions, but that is not a problem

3) Rails does not do anything with the call, and jQuery can safely handle more of those blocks per page.

4) You call it a model-specific .js, I would rather call it controller-specific. You group functionality together that belongs together. Whether the thing that ties them together is a controller or a model really does not matter. We split our js up in separate files to make it more manageable.

5) In development the assets are compiled on every request, in production it is done only once. Also in production it could be minified and compressed.

Hope this helps.

Answer 2

I'll attempt to answer some of these for you. You only really want 1 document ready call per page, but it doesn't matter if you have multiples. Whatever is contained within them is going to be the code that executes once the DOM has been loaded into the browser. Rails won't do anything magical with the javascript, it will stay the same as what you write in your files. Rails won't compile the javascript code in a funky way, for production environments it may minify it, but the actual code will remain mostly the same. This is executed by the browser - not the server.

You are not instantiating 2 instances as jQuery is only loaded once, then referenced. The $(document).ready() call is just a function essentially, nothing more.

The model-specific jquery files can be used in conjunction with Ajax in a rails app. So you can have files like 'create.js.erb' which is actually a javascript file you can pass rails actions into. If you want to fire some specific code after a create/delete post then you can use files like this to do that, you just have to respond the javascript in your rails controller - but this is going a bit deeper that you mean to by the looks of your question above.

The main thing to remember is jquery is just javascript and javascript gets run by the browser - on the front end without any dynamic integration, is will always run on the client side and jquery is fantastic mainly for DOM manipulation.

Hopefully that will clear some stuff up!