Skip to content

Trouble shooting: Jquery issues

Jump to bottom Edit New page
Mirv edited this page Nov 2, 2017 · 11 revisions

Please note: This is written for beginner programmers ... see Common Issues & Errors to get a list of issues in the short form.

A brief note before we begin, to increase the understanding of the process ...

Jquery scripts can be located almost anywhere in Rails projects, mostly it's a choice of performance or special circumstances. The Rails way is to use the JavaScript helper, which is located in the application file, in order to load the asset pipeline, including all files in the JavaScript directory.

Specifically, ...

  1. Rails hits the javascript_include_tag 'application' line in the /app/views/layout/application.html.erb
  2. Then looks for the application.js in the app/assets/javascript/appliction.js
  3. Finally, the application.js loads all the JavaScript files located in the app/assets/javascript directory via the //= require_tree . entry at the bottom of the file.

Asset Pipeline is described offically here ... Rails Guides: Asset Pipeline

How to trouble shoot Cocoon & Jquery issues

  • Check your application on a different browser
  • Check your application on a different computer
  • Check if the issue is a loading issue
  • Check if the issue is a possible Jquery library conflict
  • Check if it's a syntax error
  • Check if the previous jquery is hanging

Are the Jquery files loading?

First we need to decide if it's a loading issue...

  • When testing by hand, did you see any Jquery effects firing?
  • Open the Chrome web browser console
    • Run the page in question
    • Open the Chrome dev tools by ...
      • On the page near your fields, Right click & select Inspect
  • Check the elements section in the upper right for your javascript file names. You should see the Cocoon was loaded under the elements section.
  • If you wrote custom callbacks - then check next to the element, for the callback section to see if those registered in the web console.

Please note, just because you are seeing things in the elements, it does not necessarily mean the Jquery code you wrote is firing!

If any of the above are absent you probably will want to check your setup or files for the Jquery setup in rails

  • Open the gemfile, ensure your Jquery library & cocoon are listed (run a bundle install if needed)
  • Double check the gemfile.lock has the Jquery library & cocoon (run a bundle update if needed)
  • Open the /layouts/application.html.erb file & ensured there was only one javascript_include_tag.
  • Also that the javascript_include_tag was in the <head> tag & that the head tag is properly closed with </head>
  • Look for other non-essential or extra service loading files
    1. Check the /app/assets/javascript folder for the application.js file
    2. Check that there's no .coffee files (rails autos them if certain gems are installed)
    3. Check inside the application.js file ...
      1. Check order of your /app/assets/javascript/application.js files being loaded to ensure //= require_tree . at bottom of list. It absolutely must be at the bottom or you're going to have issues including all the files manually into the application.js
      2. Additionally, all files above must have the required, //= in front of them

If the asset is loading in the Chrome web browser elements section, we know it's either a conflict or a syntax issue

  • Insert a link in the in the app/assets/javascript/application.js to a file.
  • Make a file to hold my test code. I name my file app/assets/javascript/test.js. Make sure rails doesn't rename the file after you save it, as certain parts of rails play with the assets directory.
  • The file should log / output to console.
  • In it you need this code snippet if not using turbolinks ...
$(document).on("ready", function() {
    console.log("-- Page Load --");
   });
  • If using turbolinks ...the first line is different
$(document).on('turbolinks:load', function() {
    console.log("-- Page Load --");
   });

If the string you output to console loads ...

Congratulations - you installed the Jquery right & there's no conflicts. It is just your code syntax that needs to be corrected.

If the Jquery doesn't output your string...

It's likely a conflict with your Jquery or javascript somewhere in the project. To test this ...

  • Try using stopPropagation. It should go near the top of the function definition that needs to run.
  • Check the gemfile for having multiple versions of Jquery libraries & comment out the duplicates
    • At this point, if I'm doing raw JavaScript or Jquery files, I will comment out gem coffee-rails in my gemfile (be sure to bundle update)
    • If not sure they are duplicating read the github repository & search for closed issues between the two gems you are using that both utilize Jquery.
  • Ensure no extra scripts being loaded in the views, I use grep -r 'script' /app & check any spot that it finds. Just comment the view's <script> (along with any code here) </script> out or store them in a blank file as the .erb format does not comment out very well sometimes.
  • Pull all the entries from the app/assets/javascript/application.js and put them in a blank file to add back in to the application.js later. Below is the bare minimum of files I use in the in the application.js.
//= require jquery_ujs
//= require cocoon
//= require turbolinks
//= require test.js
  • In the app/views/layouts/application.html.erb
    • Use javascript_include_tag to include a CDN version of Jquery library.
      • Latest Jquery CDN here: https://code.jquery.com/)
    • How to use it here: https://jquery.com/download/#using-jquery-with-a-cdn

If the test.js outputs the message to the Chrome web console's log section ...

Now we put the application back together to locate the conflicting files.

  • In your app/assets/javascript/application.js, at the bottom of the file up the //= . & save it ...
  • You should re-add your js files to the app/assets/javascript one at a time, testing each time by refreshing the webpage, possibly restarting the server after copying the file in to the application.js If you are not using a CDN you will need to be doing a rake or rails assets like shown below based on version
  • For versions before Rails 5, use rake assets:clean & the rake assets:precompile
  • For Rails 3 & 4 use rails assets:clean & the rails assets:precompile ... I believe Rails 1 & 2 didn't use asset pipeline, but someone made a Rails 2 gem for backwards compatibility ...

The Rails 2 gem is here ... Rails 2 Asset Pipeline

Add a custom footer
Add a custom sidebar
Clone this wiki locally