4

I think I'm fundamentally misunderstanding how to implement Javascript in my rails app. My understanding was that you throw your Javascript into your application.js file and then you can reference elements in your DOM using jQuery in order to make an interactive web page.

I just checked through all of my code, and it looks clean (posted below in case I'm wrong). My thought is that I may be putting my Javascript in the wrong place, or I'm missing a dependency somewhere? I found other posts to be mostly unhelpful for me. How do I merge Javascript into my app?

application.js

function main() {
  $('.answers-box').hide();
  $('.qaa-box').on('click', function() {
    $(this).next().slideToggle(400);
  });
}
$(document).ready(main());

page.html.erb

<div class="qaa-box">
  <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
  <p class="answers-box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </p>
</div>
Styx
  • 9,863
  • 8
  • 43
  • 53
Martin
  • 295
  • 1
  • 2
  • 10

4 Answers4

12

Have you found this?
Where to Stick Your JavaScript.

Where to Stick Your JavaScript

Whether you use the Rails asset pipeline or add a <script> tag directly to a view, you have to make a choice about where to put any local JavaScript file.

We have a choice of three locations for a local JavaScript file:

  • the app/assets/javascripts folder
  • the lib/assets/javascripts folder
  • the vendor/assets/javascripts folder

Here are guidelines for selecting a location for your scripts:

  • Use app/assets/javascripts for JavaScript you create for your application.
  • Use lib/assets/javascripts for scripts that are shared by many applications (but use a gem if you can).
  • Use vendor/assets/javascripts for copies of jQuery plugins, etc., from other developers.

In the simplest case, when all your JavaScript files are in the app/assets/javascripts folder, there’s nothing more you need to do.

Add JavaScript files anywhere else and you will need to understand how to modify a manifest file.

Mysterious Manifests
There are two kinds of files in a JavaScript assets folder:

  • ordinary JavaScript files
  • manifest files
    You can also have CoffeeScript files and ERB files which are variations on ordinary JavaScript files.

Manifest files have the same .js file extension as ordinary JavaScript files. Manifest files and ordinary JavaScript files can be combined in a single file. This makes manifest files mysterious, or at least non-obvious.

The default app/assets/javascripts/application.js file is a manifest file. It’s a manifest file because it contains directives:

//= require jquery  
//= require jquery_ujs  
//= require_tree .

Directives tell Sprockets which files should be combined to build a single JavaScript script. Each file that contains manifest directives becomes a single JavaScript script with the same name as the original manifest file. Thus the app/assets/javascripts/application.js manifest file becomes the application.js script.

All scripts in the app/assets/javascripts folder are automatically added to the default application.js script when the manifest file includes the default //= require_tree . directive.

Hope this helps.

Pang
  • 9,564
  • 146
  • 81
  • 122
Iqlaas Ismail
  • 385
  • 7
  • 21
  • This is super helpful, and I read through the article you posted, now I know, at least, where to stick my javascript, I'm still having trouble getting it to run though. :/ – Martin Oct 03 '17 at 13:14
1

If you're using Rails 5 you may need to add jQuery to your project by adding

gem 'jquery-rails'

in your Gemfile, as well as adding

//= jquery

to your app > assets > javascript > application.js file.

Since Rails 5 uses Turbolinks, you may also need to change the listener

$(document).ready to $(document).on('turbolinks:load', function(main());

Adding a console.log to the main function will help with debugging to see if the event is being fired.

Andy
  • 720
  • 1
  • 7
  • 13
  • Okay, so I have the gem. I added //= jquery to my application.js. I tried both `$(document).ready` and the other method and added a `console.log` No dice. Its not even firing. What should I do to troubleshoot this? How do I get rails to listen to this? – Martin Oct 03 '17 at 00:18
  • In troubleshooting rails, you first want to check any spellings. Double check your functions, names, variables, etc. Then restart the rails server. If those don't work make a very simple jQuery function you know 100% will work, like `$('.qaa-box').on('click', function() { console.log("jQuery fired") });` and place it inside of main. Use that to determine if jQuery is firing events or not – Andy Oct 03 '17 at 14:43
  • I did that. It is not firing events. What do I do now? – Martin Oct 03 '17 at 16:36
  • Try changing `$(document).on('turbolinks:load ...` to `document.addEventListener("turbolinks:load", function() { alert("ok!") });` and see if that works – Andy Oct 03 '17 at 19:25
  • this is on the right track. It made the alert "ok!" pop up. Now how should I write my callback to load my function? I tried playing with the above callback with my function and wasn't able to get it to work. – Martin Oct 04 '17 at 17:04
  • Easiest way would be to remove the function and place it directly into the body: https://gist.github.com/anonymous/f02d9e4cf0038fc1420643255dedc64b – Andy Oct 04 '17 at 21:26
0

You forgot to add the parentheses after the function main() in document.ready 

$(document).ready(main();)

In addition to this, try the following:

Add the jquery-rails gem to your Gemfile (place this in your gem file):

gem 'jquery-rails'

Then run bundle install

Then write the following in your application.js:

//= require jquery 
//= require jquery_ujs
the12
  • 2,395
  • 5
  • 19
  • 37
  • You can skip the semi – Lixus Oct 02 '17 at 22:45
  • You could.. I prefer to keep them there in case I write another function. More reasons to use semicolon after every statement can be found in this thread: https://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript – the12 Oct 02 '17 at 22:50
  • Updated my answer. – the12 Oct 03 '17 at 00:31
0

The $(document).ready() expects a function, not the result of function call. Instead, you're calling main() before DOMReady event, and passing undefined into $(document).ready() function.

It should be like this:

$(document).ready(main);
Styx
  • 9,863
  • 8
  • 43
  • 53