Rails 4 jQuery conflicts with javascript

Question

I am trying to make an application in Rails 4.

I'm afraid. I am trying to include a bootstrap theme and I am getting issues with the javascripts of the provider and the rest of the code.

I think the problem may have something to do with having jQuery in my application.js application and then having the provider .js files that start with the '$' sign:

$.circleProgress = { 

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

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

Do I need to search for each "$" in the provider files, or otherwise, how can I put a secure wrapper in jQuery - especially where it is embedded through the gem.

Has anyone encountered these problems and understood the solution? I would really like to 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 - Enabling Provider Assets

Observation

I noticed that the console error log shows problems with .js files in the app / assets / javascripts folder.

They are the only other files in this folder (except application.js). My .js application has "require_tree", so they will be compiled. But something that, in my opinion, might be inconsistent in these files with (possibly) including jQuery in application.js?

The log displays:

 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 is saved as .js files in app / assets / javascripts.

Perhaps I 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 contents of these files?

For example, the first file is opened 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 part of my problem is with files stored in app / assets / javascripts with .js extensions. Each of them is displayed in the console error 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

I put this post as a work job.

The decision is complex, but in case it helps others understand what went wrong:

• some stones require jQuery functions. This may interfere with the general inclusion of jQuery in application.js. I had specific code for managing specific conflicts.

• in application.js, you need to specify all requirements in order, so the dependencies are below the js file, which depends on them. Its hard to know which file depends on what. I would never have thought of that.

• my rake assets: precompile call puts the compiled assets in a shared folder. I tried this because it caused conflicts with other calls (especially when the files were updated).

There is no real help for anyone trying to learn in this answer. I definitely did not learn how to solve these problems on my own, but I found a work expert who could help so that I could move on.

I am afraid that this is one of those dirty problems that the blog textbooks do not help.

Answer 2

It looks like you have a lot of cleaning up. Is this your first Rails app? If so, I'm curious why you have so many JS files. I would shorten the list to a few, fix the problems that remain, and slowly begin to add things and fix problems when you go. That would be my overall strategy. For each mistake, slowly and twice check that you really understand the reason before you swear here and there, hoping for a fix.

Here are some tips for specific errors that I see:

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

 //= require_tree . 

The problem is that you have already turned them on one by one. Therefore, they are turned on twice. That's why you get warnings like 'findGoodContent' has already been declared . I know it’s nice to use require_tree (although I don’t like it), so if you want to keep this, consider moving all third-party JS files from app/assets/javascripts and to vendor/assets/javascripts . You can still require them in your application.js , but they will not be repeated using require_tree .

404 errors for things like grayscale.svg and flaticon.woff , as well as other image / font resources - this is because you do not have these files in app/assets (or vendor/assets ). Or if you do, you need to make sure your JS / CSS files and view files refer to them using <%= asset_path "grayscale.svg" %> , so that when Rails manages its path, you still load them from the right place. Read about image_url and friends and make sure you understand how they work. By default, Asset Pipeline uses unused names in development and distorted names in production, so everything can work until you hit everything alive!

In addition, if you add <%= foo %> tags to a CSS or JS file, you need to add the .erb extension to this file so that Rails knows how to handle these tags. This is why you get a 404 error trying to download this:

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

In one of your files, possibly in a CSS file, you are doing something like this:

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

But the file requires the extension .erb : blah.css.erb or blah.scss.erb or something else.

Errors like $ is not a function mean that these files are jQuery dependent, but the jQuery $ object is undefined. If you use noConflict , as someone suggested in the comments, you should stop because you want $ be a jQuery object.

Good luck If you feel depressed, I would really start by cutting out as many JS require lines as possible, as well as fixing errors one at a time.

In addition, I would reorder the require strings so that the dependencies are at the top (like jquery), and everything that relies on them is lower.

Oh, one more thing, actually not a mistake: I would not put mini files (for example, hammer.min.js ) in your repository. An asset provider knows how to minimize. So check the non-urgent version so that if you need to read the source code, you can.

Answer 3

I don't know why no one posted this, but $ .something in jQuery is just a shorthand for jQuery.something.

The ability to disable this is baked in jQuery

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

Here is an example from their docs

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

In fact, it will be much easier to use jQuery versus $ in your hand-rolled code than to modify an inherited library. In doing so, you must send the problem to the intruder library in order to fix this function, similar to how jQuery does it, since jQuery is quite popular.

Good luck