select2-rails gem is not working on Rails4 - javascript

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

Related

Change the Default HTML that CKEditor Renders

I'm using the CKEditor gem with my Rails 5 app. The text in CKEditor is rendering as:
<p>Foo</p>
and what I want to do is make it render as on the show view (after the record is created using CKEditor):
<p class="lead">Foo</p>
Reading the documentation, I saw that there was a config option for <p>, `format_p',
So I added a javascripts/ckeditor/config.js file based on the documentation:
CKEDITOR.editorConfig = function (config) {
config.format_p = { element: 'p', attributes: { 'class': 'lead' } };
}
In application.js, I have this:
//= require_directory .
However, it's still rendering with just <p>.
application.js
//= require jquery3.min
//= require rails-ujs
//= require jquery-ui
//= require popper.min
//= require bootstrap.min
//= require jquery.slimscroll
//= require jquery.core
//= require jquery.app
//= require datatables
//= require activestorage
//= require turbolinks
//= require footable.min
//= require select2-full
//= require moment
//= require datepicker-init
//= require daterangepicker-init
//= require daterangepicker
//= require jquery.counterup.min
//= require jquery.scrollTo.min
//= require metisMenu.min
//= require modernizr.min
//= require bootstrap-datepicker.min
//= require bootstrap-filestyle.min
//= require bootstrap-notify.min
//= require cable
//= require tags_field
//= require symbol_field
//= require waves
//= require wow.min
//= require ckeditor/init
//= require_directory

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

rails-jquery-autocomplete Uncaught TypeError

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

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

Ruby on Rails: "couldn't find file 'jquery.ui.datepicker'"

Okay, this is driving me nuts. I've been following the instructions to install a JQuery datepicker here: http://railscasts.com/episodes/213-calendars-revised but I'm getting hung up on this error:
Sprockets::FileNotFound in Verifications#new
couldn't find file 'jquery.ui.datepicker'
(in /app/assets/stylesheets/application.css:11)
Here's application.js:
//= require jquery
//= require jquery.ui.all
//= require jquery_ujs
//= require_tree .
Here's application.css:
*= require jquery.ui.datepicker
*= require_self
*= require_tree .
and in Gemfile:
group :assets do
gem 'jquery-ui-rails'
end
Anyone see what I'm missing?
For future readers. First, make sure you've restarted your rails server after installing the gem as krstck answered.
Then, double check the version of your gem. jquery-ui-rails has changed its require syntax in 5.0.0. Now you should write:
//= require jquery-ui/datepicker
Also add to css
*= require jquery-ui/datepicker
Answering my own question here in case someone else makes the same dumb mistake. I restarted the rails server, and then it worked.
For Rails 5 users, to use the jQuery datepicker you must add this to your application.js:
//= require jquery-ui/widgets/datepicker
And this to your application.css:
/*
*= require jquery-ui/datepicker
*/
You can also just use the usual gem version:
gem 'jquery-ui-rails'
Restart your server as well.
Here is the documentation
adds 'jquery-ui-rails' on your Gemfile, and use a hyphen instead of a point to require jquery-ui
//= require jquery-ui
or downgrade the jquery-ui gem version
gem 'jquery-ui-rails', '~> 4.2.1'
Downgrading from jquery-ui-rails 5.0.0 to 4.2.1 fixed it for me.
Just to add to this: I had the same issue, I finally solved it by placing //= require turbolinks before the jquery requirements in application.js:
//= require turbolinks
//= require jquery
//= require jquery.ui.datepicker
//= require jquery_ujs
//= require_tree .

Categories

Resources