Rails 4 jQuery conflicts with javascript

Question

Im trying to make an app in Rails 4.

I'm struggling. I'm trying to incorporate a bootstrap theme and I'm getting issues with the vendor javascripts and the rest of the code.

I think the problem might have something to do with having jQuery in my application.js and then having vendor .js files which start with a '$' sign:

$.circleProgress = {

I've just read this: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

My problem is though that I don't know how to make the changes that make the code safe.

Do I need to do a search for every '$' in the vendor files or otherwise how do i put a safe wrapper on jQuery - especially where it is incorporated through a gem.

Has anyone encountered these problems and figured out a solution? I'd love some help.

Application.js

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require masonry.pkgd.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require gmaps/google
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
//= require slider
//= require underscore
//= require dependent-fields
//= require_tree .
//= require bootstrap-slider


$(document).ready(function() {
    DependentFields.bind()
});

Related problem: Rails 4 - incorporating vendor assets

Observation

I've noticed that the console log of errors shows problems with .js files in my app/assets/javascripts folder.

They are the only other files in that folder (aside from application.js). My application.js has 'require_tree' so they will be compiled. But something I think might be conflicting in those files with (perhaps) the inclusion of jQuery in the application.js?

The log shows:

Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
circle-progress.self-f67ec54c54a06da27d11cda862036a058792eadc8ef982df2e7c0a1682536c31.js:9 Uncaught TypeError: Cannot set property 'circleProgress' of undefined
conversations.self-832ece2867c1701a5202459ab73ecd6432da2a6c833d8822d37025845a0aefcc.js:10 Uncaught TypeError: $ is not a function
organisations.self-6547f734e3a69b76176dfe5bb194e428c0bc560ad3fb69811dce9c7f8ccb9f4d.js:2 Uncaught TypeError: $ is not a function
http://localhost:3000/assets/%3C%=%20asset_path('random.jpg')%20%%3E Failed to load resource: the server responded with a status of 400 (Bad Request)
http://localhost:3000/profiles/assets/images/grayscale.svg#greyscale Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.woff Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/profiles/assets/custom/images/preloader.gif Failed to load resource: the server responded with a status of 404 (Not Found)
chrome-extension://mkjojgglmmcghgaiknnpgjgldgaocjfd/content/contentScripts/kwift.CHROME.min.js:1384 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
http://localhost:3000/assets/flaticon.woff Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/flaticon.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
main.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js:316 Uncaught TypeError: dp(...).multipleFilterMasonry is not a function

Each of the js folders that are identified as errors are saved as .js files in app/assets/javascripts.

Do I perhaps need to use a different file name (.js.erb / js.coffee)? to make this work. Alternatively, do I need to put script tags around the content of those files?

For example, the first file opens with:

$.circleProgress = {
    // Default options (you may override them)
    defaults: {
        /**
         * This is the only required option. It should be from 0.0 to 1.0
         * @type {float}
         */
        value: 0,

UPDATE

I think some part of my problem is to do with the files saved in app/assets/javascripts with ".js" extensions. Each of them shows in the console errors list as:

kwift.CHROME.min.js:1271Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
circle-progress.self-f67ec54….js?body=1:9 Uncaught TypeError: Cannot set property 'circleProgress' of undefined(anonymous function) @ circle-progress.self-f67ec54….js?body=1:9
conversations.self-832ece2….js?body=1:10 Uncaught TypeError: $ is not a function(anonymous function) @ conversations.self-832ece2….js?body=1:10
organisations.self-6547f73….js?body=1:2 Uncaught TypeError: $ is not a function(anonymous function) @ organisations.self-6547f73….js?body=1:2(anonymous function) @ organisations.self-6547f73….js?body=1:6
projects.self-9c019ba….js?body=1:1 Uncaught TypeError: $ is not a function(anonymous function) @ projects.self-9c019ba….js?body=1:1
main.self-5888479….js?body=1:316 Uncaught TypeError: dp(...).multipleFilterMasonry is not a functionwindow.onload @ main.self-5888479….js?body=1:316
kwift.CHROME.min.js:1271 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared

Answer 1

It sounds like you have a lot of cleanup to do. Is this your first Rails app? If so I'm curious why you have so many JS files already. I would cut back your list to just a few, fix the problems that remain, and slowly start adding things and fixing problems as you go. That would be my general strategy. For each bug, go slow and double-check that you really understand the cause, before you slash here and there hoping for a fix.

Here are some tips for specific bugs I see:

This line will include all the .js files in app/assets/javascripts:

//= require_tree .

The problem is that you're already including them one-by-one above. So they are getting included twice. That's why you're getting warnings like 'findGoodContent' has already been declared. I know it is kind of nice to use require_tree (though I don't love it), so if you want to keep that, consider moving all the 3rd-party JS files out of app/assets/javascripts and into vendor/assets/javascripts. You can still require them in your application.js, but they won't get repeated by require_tree.

The 404 errors for things like grayscale.svg and flaticon.woff and other image/font assets are because you don't have those files in app/assets (or vendor/assets). Or if you do, you should make sure your JS/CSS files and view files refer to them with <%= asset_path "grayscale.svg" %> so that when Rails mangles their path you are still loading them from the right place. Read about image_url and friends and make sure you understand how they work. By default, the Asset Pipeline serves unmangled names in development and mangled names in production, so things might work right up until you push it all live!

Also, if you include <%= foo %> tags in a CSS file or JS file, then you need to add an .erb extension to that file, so that Rails knows to process those tags. That's why you're getting a 404 error trying to load this:

http://localhost:3000/assets/%3C%=%20asset_path('random.jpg')%20%%3E

In one of your files, probably a CSS file, you're doing something like this:

background-image: url("<%= asset_path('random.jpg') %>");

But the file needs an .erb extension: blah.css.erb or blah.scss.erb or whatever.

Errors like $ is not a function mean that those files depend on jQuery, but the jQuery $ object is not defined. If you are using noConflict, as someone suggested in the comments, you should stop, because you do want $ to be the jQuery object.

Good luck! If you are feeling overwhelmed, I would really start with cutting out as many of the JS require lines as possible, and tackle the bugs one at a time.

Also, I would re-order the require lines so that dependencies are at the top (e.g. jquery), and things that rely on them are lower.

Oh one more thing, not really a bug: I would avoid putting already-minified files (like hammer.min.js) into your repository. The Asset Pipeline knows how to minify. So check in the unminified version, so that if you have to read the source code, you can.

Answer 2

I put this post out as a job on upwork.

The solution is complex, but in case it helps others to understand what's gone wrong:

1. some gems require jQuery features. That can clash with the general inclusion of jQuery in application.js - I had some specific code written to manage specific conflicts.

2. in application.js, you need to list all the requirements in order, so that dependencies are below the js file that depends on them. Its difficult to know which file depends on what. I never would have figured this out alone

3. my rake assets:precompile call puts compiled assets in the public folder. I overrode this because it was causing conflicts with other calls (especially when files are updated).

There is no real help in this answer for anyone trying to learn. I didn't exactly learn how to solve these problems myself, but I did find an expert on upwork, who was able to help so that I could move on.

I'm afraid this is one of those messy problems that the blog tutorials don't help with.

Answer 3

Not sure why no one has posted this but $.something in jQuery is just shorthand for jQuery.something.

The ability to disable this is baked into jQuery

https://api.jquery.com/jquery.noconflict/

Here is an example from their documents

jQuery.noConflict();
// Do something with jQuery
jQuery( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";

Essentially it'll be a lot easier to just use "jQuery" vs "$" in your hand rolled code than change the inherited library. That being said you should submit a issue to the offending library to fix this functionality, similar to how jQuery does it, as jQuery is pretty popular.

Good luck!