Develop Reference

Rails - Conflicts between jQuery and javascript

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?

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()
});

Try to wrap your javascript code where you use $ variable with anonymous function:
(function($){
// put your code here
})(jQuery);

Jquery-ui Tabs only work after page-refresh

My Jquery tabs work, but only after I refresh the page. See the images below for more information. What is causing this and more importantly, how can I solve this?
I am not getting any errors. I allready added:
$(document).ready(function(){
$("#functions").tabs();
});
This is my order of code (Ruby, javascript.js)
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require jquery-ui/tabs
//= require turbolinks
//= require_tree .
Code & View before: refresh
Code & View after: refresh

Rails 4 and jQuery UI

I have to be doing some thing very silly/stupid here. Been hitting my head all day trying to get jQueryUI to run in my Rails 4.2.1 application, and failed for some reason. Doesn't seem like this should be that hard, I must be doing something stupid that I just can't see.
I added this to the Gemfile:
gem 'jquery-ui-rails'
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require twitter/typeahead
//= require bootstrap
//= require_tree .
application.css
*= require bootstrap
*= require bootstrap-theme
*= require font-awesome
*= require jquery-ui
*= require_self
*= require_tree .
Yet when I type in a window say:
$('input').draggable()
I get back:
TypeError: undefined is not a function (evaluating '$('input').draggable()')
I can see in my Resources list that the draggable model is loaded. I see that jQuery is loaded, and can run other jQuery functions. I'm doing something stupid I'm sure, please help!!!

IIRC, there's a typo in the jquery-ui-rails documentation that tells you to use jquery_ui, even though the correct notation is jquery.ui (note the dot, not underscore).
Try this in your application.js:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require turbolinks
//= require_tree .
application.css:
*= require_tree .
*= require_self
*= require jquery-ui
*= require dataTables/bootstrap/3/jquery.dataTables.bootstrap

I ran:
bin/rake assets:clobber
and everything seemed to work??? Can anyone explain this for the answer vote;-)

select2-rails gem is not working on Rails4

I have tried given documentation for the select2-rails gem, but my browser console still throws an error.
Uncaught TypeError: $(...).select2 is not a function
I am using rails 4.0.1& select2-rails 3.5.9.3
My application.js
//= require jquery
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require turbolinks
//= require vendor_js
//= require_tree .
$(document).ready(function() {
$("select#team_select").select2();
});
application.css
*= require select2
*= require_self
*= require jquery.ui.accordion
*= require jquery.ui.menu
*= require jquery.ui.datepicker
*= require common
*= require owl.carousel
*= require lazybox
*= require fancybox
*= require owl.theme
*= require 7531339
*= require_tree .
*= require font-awesome
_form.html.erb
<%= f.select(:team_id, #teams.collect {|p| [p.name, p.id]}, {include_blank: "None"}, {id: "team_select"}) %>
What i am doing wrong here? Any help is appreciated.

The problem is surely in application.js: According to their Demo App, the sequence of requiring JS plugins is as follows:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require select2
//= require select2_locale_pt-BR
//= require_tree .
In your case, you have to load turbolinks before select2, leading to:
//= require jquery
//= require turbolinks
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require vendor_js
//= require_tree .

I never encountered this issue while using rails 4.1.5 & select2-rails 3.5.9.3.
However, after upgrading rails to 4.2.4, I get the same exact error described in this question:
Uncaught TypeError: $(...).select2 is not a function
I was able to resolve the error by removing the "select2-rails" gem from my Gemfile and replacing it with:
source 'https://rails-assets.org' do
gem 'rails-assets-select2', '~> 4.0.0'
end

On rails 5 using CoffeeScript and turbolinks I had to use the line:
$(document).on "turbolinks:load", ->
before everything so that the code gets executed when the desired page with the select tag is loaded.

I had the same problem and changing the order of JS plugins didn't help.
I ended up removing turbolinks and it's working now. Probably not the best solution but it was the best thing that I achieve after some hours searching.
So, basicly I removed that line from application.js file:
//= require turbolinks

Rails production: javascript not working

Recently I've got strange error on Rails production - some javascripts not working. Locally there is no problem - everything works perfectly, but production.
my application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require cocoon
//= require jquery.minicolors
//= require widget
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
//= require_tree .
scripts that not working - jquery.minicolors and widget(coffescript).
I've tried to add these scripts to
config.assets.precompile += %w( widget.js.coffee jquery.minicolors.js )
in production.rb, but that's doesn't work too
It's strange but if I remove
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
from application.js the rest scripts work fine

I understand this issue has been closed but I actually had the same issue recently. I fixed it by wrapping my jQuery code inside the following;
$(document).ready(
(custom JS goes here)
)
If you (or anyone in the future) has the same issue, I'd say it's cause of how Rails loads CSS/HTML and jQuery. Apparently jQuery is loaded as the head in a Rails app so it's loaded but can't be accessed after it's been loaded.

I've found a solution with help of question
I removed from application.js
//= require highcharts/highcharts
//= require highcharts/highcharts-more
and keep only
//= require highcharts/highstock
highstock.js keeps in /vendor/assets/javascripts and contains necessary scripts for highcharts working