Rails - Conflicts between jQuery and javascript

Question

I'm having a problem loading gems into my Rails 4 app.

I use jQuery. In my application.js, I have:

//= 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 dependent-fields
//= require bootstrap-slider

$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
    $(document).ready(function() {
        DependentFields.bind()
    });
});


//= require_tree .

In my gem file, I am trying to use rails dependent fields gem. That gem also requires underscore.js.

I think the reason this gem isn't working is because it uses javascript.

I'm having the same problem with the disqus rails gem (which is raising errors that are localhost/:94 Uncaught TypeError: $ is not a function

Does anyone know how to resolve conflicts between rails jQuery and javascript?

Uzbekjon · Accepted Answer · 2016-04-24 10:14:27Z

2

The problem is that you have set jQuery to work in noConflict mode through this line: $.noConflict();. jQuery will not define $ variable globally and will be available through jQuery variable only.

$.noConflict();   // <=====  HERE  ======
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
    $(document).ready(function() {
        DependentFields.bind()
    });
});

The "plugins" that are raising this error are probably expecting $ variable to be set. They should not be doing that however.

You have 2 options:

Remove $.noConflict(); line from your application.js file.
Wrap the code that is raising this error in to a function where $ is set to jQuery variable.

Like this:

(function($){
  // Here: $ === jQuery
  // Put js code that raises error here
})(jQuery);

Also, you are using 2 document ready events in your code. You can improve it to this:

$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
  DependentFields.bind()
});

answered Apr 24, 2016 at 10:14

Uzbekjon

11.8k5 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Uzbekjon Over a year ago

I see. You need to go with the first option and remove $.noConflict(); line. Otherwise, find the gem on GitHub and create a pull request with the improvement.

Mel Over a year ago

I don't understand. Do I wrap the gem in the gem file in the code you suggest as option 1?

Uzbekjon Over a year ago

No, forget about everything and just delete this line from your application.js: $.noConflict();.

Uzbekjon Over a year ago

From what you provided, you don't have a conflict. The error message is Uncaught TypeError: $ is not a function, which means that a function with the name $ is not defined. If you remove line $.noConflict(); from your application.js file, it will create a function with that name.

Mel Over a year ago

but that's just one of the .js files in my app/assets/javascripts folder

|

Igor Bukin · Accepted Answer · 2016-04-24 10:03:13Z

0

Try to wrap your javascript code where you use $ variable with anonymous function:

(function($){

// put your code here

})(jQuery);

answered Apr 24, 2016 at 10:03

Igor Bukin

1,0068 silver badges14 bronze badges

1 Comment

Mel Over a year ago

When I try that in my underscore.js file, I still can't get the dependent fields rails part working.

Collectives™ on Stack Overflow

Rails - Conflicts between jQuery and javascript

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related