title: Rails 4 jQuery conflicts with javascript
body: <p>Im trying to make an app in Rails 4.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>$.circleProgress = {
  </code></pre>
  
  <p>I've just read this: <a href="https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/" rel="nofollow noreferrer">https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/</a></p>
  
  <p>My problem is though that I don't know how to make the changes that make the code safe.</p>
  
  <p>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.</p>
  
  <p>Has anyone encountered these problems and figured out a solution? I'd love some help.</p>
  
  <p>Application.js</p>
  
  <pre><code>//= 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()
  });
  </code></pre>
  
  <p>Related problem: <a href="https://stackoverflow.com/questions/36684671/rails-4-incorporating-vendor-assets">Rails 4 - incorporating vendor assets</a></p>
  
  <p><strong>Observation</strong></p>
  
  <p>I've noticed that the console log of errors shows problems with .js files in my app/assets/javascripts folder.</p>
  
  <p>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?</p>
  
  <p>The log shows:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Each of the js folders that are identified as errors are saved as .js files in app/assets/javascripts. </p>
  
  <p>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?</p>
  
  <p>For example, the first file opens with:</p>
  
  <pre><code>$.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,
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>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:</p>
  
  <pre><code>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
  </code></pre>