rails jQuery Accordion

Question

How do you set up jQuery to work with rails. I specifically want to use the accordion feature. I have used this before with PHP but i cannot work out where everything needs to go in a rails application. I have imported jQuery into the javascript folder and included it in the application. My HTML is laid out correctly, but i don't understand where the following should go:

<script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });
</script>

I have also tried installing jRails and using the scriptaculous Accordion, but neither of them worked either, so I think I am missing some vital link between javascript and rails.

I have looked all over for some explicit instructions on how to set it up, if anyone has a link or can walk me through it it would be appreciated.

After checking firebug I can see I am getting the following error:

$("#accordion").accordion is not a function

I call jQuery before I call application.js

Answer 1

You just need put this line in your view if you don't want UJS system.

Instead you can put it on your application.js and require it in your head node.

Answer 2

You also need to make sure that you commented out default javascript libraries, because out of the box, Rails applications come packaged with prototype which will conflict with your jQuery library.

It looks like this :

<%= javascript_include_tag :defaults %>

Are you hitting any javascript errors in firebug?

Answer 3

1. I downloaded the wrong jQuery library, the link on the website pointed to an incomplete .js file. Download what you need from: http://jqueryui.com/download don't just download the file from http://docs.jquery.com/Downloading_jQuery
2. Only call the javascript files you need directly in your standard layout, do not use the :defaults option.
3. If you are going to use a lot of fancy jQuery things on different pages add the document ready function to your view, else add it to your application.js
4. Ensure that you call the jQuery UI files before the application.js file or it will not find the functions in the right order.