Question

I am using Ruby on Rails 3 and I would like to use jQuery instead of Prototype (this one is what I am using at this time). I read many books, guides and tutorials but I still don’t understand how I must use jQuery in my code (maybe it seams that nobody it “really” clear on this matter). Also, I have a lot of code written using Prototype so I would like to handle both at the same time and “progressively” migrate to jQuery.

I included the jQuery file in the layout file making <%= javascript_include_tag :defaults, 'jquery' %> so that the <script src="/javascripts/jquery.js?1307515315" type="text/javascript"></script> is present in the source code of all HTML pages. In order to avoid errors in the application.js file I added jQuery.noConflict() to the application.js file. Now, what I must do?

If I state a jQuery method in the application.js file

jQuery(document).ready(function() {
    jQuery('#test_id2').click(function() {
      alert('Handler for .click() called.');
    });
})

and I call it using

<%= link_to 'change1', '#', :id => 'test_id1' %>

it will work but I would like to put the above code in a separated js file. How can I do and maj?

How I must name the JS file for a controller action? Where (in which folder) I must locate the related JS file? How can I state the respond_to method in my controllers?

def edit
  ...
  respond_to do |format|
    format.html # render edit.html.erb
    format.js # render... what file?! where?!
  end
end

Using Prototype I can write code directly in view files like the following:

<%= link_to_function( "change", :id => 'test_id2' ) do |page|
  page[:test_id3].toggle
  ...
end %>

How can I do that using jQuery in view files?

Have you some advice?

---

UPDATE

In my edit.js.erb file I have

<%
jQuery(document).ready(function() {
    jQuery('#test_id1').click(function() {
      alert('Handler for .click() called.');
    });
})
%>

In the edit.html.erb file I have

<%= link_to 'Test link', '#', :id => 'test_id1' %>

But when I click the above link jQuery doesn’t work (the alert method is not triggered). Furthermore, if I try to insert the JavaScript code directly in the view file, I get the following error:

NameError: undefined local variable or method `document' for #<#<Class:0x00000102aa04d0>:0x00000102a75eb0>

Answer 1

There are two differents things.

They are regular script that you can load the same way as you did with jquery:
You put them in your public/javascript directories and include them with

<%= javascript_include_tag YourNameFile %>

Note that I didn’t add the .js. javascript_include_tag will do that for you.

Then you have JS Templates. It’s like your Prototype views. Except you have Jquery inside.
So what you previously did works!
If you use

respond_to do |format|
  format.html # render edit.html.erb
  format.js # render edit.js.erb
end

It’ll render edit.js.erb (you can find it in the same directory as your edit.html.erb file).

Then you can add your jQuery AND your ‘ruby’ in those files (exactly like prototype).
Just make sure that you load your jQuery.

If I missed something, add comment. 🙂

=== EDIT ===

In your Templates, you have to put <% %> only arounds Rails function !! Otherwise, it’s supposed to be Javascript. So you edit.js.erb should looks like:

jQuery(document).ready(function() {
    jQuery('#test_id1').click(function() {
      alert('Handler for .click() called.');
    });
})