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);
Related
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
I'm trying to use the rails-jquery-autocomplete gem but can't seem to get it working.
At first I thought it was the order that I was requiring it in the application.js but based on other posts on SO, I don't think this is the case. Here is that code anyway:
//= require jquery
//= require jquery_ujs
//= require autocomplete-rails
// require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require ckeditor/init
//= require social-share-button
//= require questions
// require_tree .
The error I am getting for it at the moment is:
Uncaught TypeError: undefined is not a function autocomplete-rails-81b10cb822d78b60a1415bace9e9714b.js?body=1:1
t.railsAutocomplete.fn.extend.initautocomplete-rails-81b10cb822d78b60a1415bace9e9714b.js?body=1:1
t.railsAutocompleteautocomplete-rails-81b10cb822d78b60a1415bace9e9714b.js?body=1:1
t.fn.railsAutocomplete.ejquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4666
jQuery.event.dispatchjquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4334
jQuery.event.add.elemData.handlejquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4575
jQuery.event.triggerjquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4902
jQuery.event.simulatejquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:5165
jQuery.each.handler
Any ideas why it's not recognising it?
Thanks
first, have you run rails generate autocomplete:install in your project root?
Also you should include autocomplete-rails after jquery-ui which seems to be missing.
javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require autocomplete-rails
....
If that does not help put this in the head of your application.haml/html:
layouts/application.html
....
javascript_include_tag "autocomplete-rails.js"
....
The Doc is quite clear on what you have to do, to get up and running. Good luck
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
I'm trying to get a jquery plugin (geocomplete) to work and am having an issue with my rails asset pipeline.
To get the plugin to work, I need to load a .js file called jquery.geocomplete.js located in my /vendor/assets/javascripts/ directory
In my application.js file I include jquery.geocomplete
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require jquery.turbolinks
//= require jquery.geocomplete
//= require jquery.geocomplete.min
//= require underscore
//= require gmaps/google
//= require_tree .
When I load my app in development mode, I can see in the source code that the following asset has been loaded:
<script data-turbolinks-track="true" src="/assets/jquery.geocomplete.js?body=1"></script>
However, the plugin requiring does not work. To get it to work I have to paste:
<script src="/assets/jquery.geocomplete.js"></script>
into my relevant view. (This then causes issues when I run in production mode in Heroku)
Can anyone tell me why the myjquery.geocomplete.js file will not run my plugin when I load it through the asset pipeline?
Any thoughts/ideas appreciated.
This is the error i am facing:
Uncaught TypeError: Object [object Object] has no method 'datepicker' myquery.js:13
(anonymous function) myquery.js:13
fire jquery.js:3049
self.fireWith jquery.js:3161
jQuery.extend.ready jquery.js:434
completed
the code of myquery.js is below:
jQuery(function($){
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd'
});
});
In my application.js i have:
//= require jquery
//= require myquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
And in my application.html.erb i have this:
<%= stylesheet_link_tag "http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" %>
true %>
and lastly my index.html.erb says:
<label for="date">Date</label>
<input type="text" id="datepicker"></p>
i have tried almost all the answers on stackoverflow but no gain. plz tell me what to do...
You have to load jquery ui first
And then load myquery.js
because datepicker() is the method of jquery ui.
So, your javascript load order sholud be the following...
//= require jquery
//= require jquery_ujs
//= require myquery
//= require turbolinks
//= require_tree
It seams as jQuery UI js file is not loaded before you use datepicker method. Change the order of require(jquery_ujs before myquery):
//= require jquery
//= require jquery_ujs
//= require myquery
//= require turbolinks
//= require_tree .
same require order as write Hasib Hasan Arnab
and
$( document ).ready(function() {
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd'
});
});