Version Rails 5 beta 3. I am using gem jquery-ui-rails 5.0.5
gemfile
................................................
gem 'jquery-rails'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-ui-rails'
application.js:
//= require turbolinks
//= require jquery
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require jquery.turbolinks
//= require cocoon
//= require jquery_nested_form
//= require jquery-fileupload/basic
application.css
/**
* application.css
*
*= require jquery-ui/datepicker
*= require_self
*= require_tree ./all
freelancers/edit.html.erb
<li class="form-fields__group form-fields__group_birthdate">
<label for="freelancer_birth_date">Birthday</label>
<div class= "field">
<%= f.text_field :birthday %>
</div>
</li>
Table name: freelancers
#
# id :integer not null, primary key
# first_name :string
# last_name :string
# rate :integer
# birthday :date
javascripts/freelancer.coffee
jQuery ->
$('#freelancer_birthday').datepicker()
I click on field birthday, but dont open datepicker. Nothing happens. How can solve this problem? Thank you
Related
My app works locally, however when I try to deploy to Heroku, I get a Sprockets::FileNotFound: couldn't find file 'angular' with type 'application/javascript' error.
I have tried precompiling with RAILS_ENV=production bundle exec rake assets:precompile and purging my build cache with heroku builds:cache:purge -a findum, but still no luck. I recently migrated from Bower to Yarn– not sure if my asset path is the problem?
Has anyone run into a similar error that they were able to resolve? So many thanks 🙏.
This is my application.js :
//= require lodash
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jqueryui-touch-punch
//= require cloudinary/jquery.fileupload
//= require cloudinary/jquery.cloudinary
//= require angular
//= require angular-resource
//= require angular-animate
//= require angular-bootstrap
//= require angular-sanitize
//= require angular-rails-templates
//= require_tree ../templates
//= require bootstrap
//= require external/picker
//= require external/picker.date
//= require angular-filter/dist/angular-filter
//= require swipebox
//= require angular-ui-sortable/sortable
//= require bootstrap-select/dist/js/bootstrap-select
//= require string-mask/src/string-mask
//= require_tree .
And Gemfile:
source 'https://rubygems.org'
gem 'rails', '~> 4.2.0'
gem 'active_model_serializers', '~>0.9.3'
gem 'angular-rails-templates'
gem 'responders', '~> 2.0'
gem 'angular_rails_csrf'
gem 'pg'
gem 'resque', require: "resque/server"
# gem 'resque-scheduler'
gem 'bootstrap-sass', '~> 3.2.0'
gem 'sass-rails', '>= 3.2'
gem 'animate-scss'
gem 'swipebox'
gem 'rake', '< 11.0'
gem 'lodash-rails'
gem 'jquery-rails'
gem 'turbolinks'
# gem 'bcrypt-ruby', '3.0.1'
gem 'devise'
gem 'geocoder'
gem 'searchkick'
gem 'cloudinary'
gem 'httparty'
gem 'newrelic_rpm'
gem 'rack-cors', :require => 'rack/cors'
gem 'passenger'
gem 'uglifier'
gem 'rollbar'
gem 'figaro'
gem 'git'
gem 'mailchimp', '~> 0.0.9'
gem 'twitter'
gem 'friendly_id', '~> 5.1.0'
gem 'roo', git: "https://github.com/roo-rb/roo.git"
gem 'uuid'
gem 'awesome_print'
gem 'seed_dump'
gem 'mixpanel-ruby'
gem 'redcarpet'
group :production do
gem 'rails_12factor'
gem 'aws-sdk'
end
group :test, :development do
gem 'factory_bot_rails'
gem 'rspec-rails', '~> 3.2.0'
gem 'protractor-rails'
gem 'dotenv-rails'
end
group :test do
gem 'database_cleaner', '~> 1.3.0'
end
group :development do
gem 'annotate', '2.5.0'
gem 'better_errors'
gem 'binding_of_caller'
gem 'pry-byebug'
gem 'pry-rails'
gem 'twitter-console'
gem 'mailcatcher'
gem 'bullet'
end
ruby '2.2.2'
assets.rb
Rails.application.config.assets.precompile.shift
# Explicitly register the extensions we are interested in compiling
Rails.application.config.assets.precompile.push(Proc.new do |path|
File.extname(path).in? [
'.html', '.erb', # Templates
'.png', '.gif', '.jpg', '.jpeg', '.svg', # Images
'.eot', '.otf', '.svc', '.woff', '.ttf', # Fonts
]
end)
# Precompile additional assets
Rails.application.config.assets.precompile += ['private_beta.css', 'admin/admin.js', 'admin/admins.css']
My package.json looks like this:
{
"name": "Findum",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/findum/findum.git"
},
"engines": {
"node": "14.x",
"yarn": ">= 1.0.0"
},
"scripts": {
"postinstall": "node -e \"try { require('fs').symlinkSync(require('path').resolve('node_modules/#bower_components'), 'vendor/assets/bower_components', 'junction') } catch (e) { }\""
},
"dependencies": {
"#bower_components/angular": "angular/bower-angular#1.2.32",
"#bower_components/angular-animate": "angular/bower-angular-animate#~1.2.27",
"#bower_components/angular-bootstrap": "angular-ui/bootstrap-bower#~0.12.0",
"#bower_components/angular-filter": "a8m/angular-filter#*",
"#bower_components/angular-resource": "angular/bower-angular-resource#~1.2.27",
"#bower_components/angular-sanitize": "angular/bower-angular-sanitize#~1.2.27",
"#bower_components/angular-ui-sortable": "angular-ui/ui-sortable#~0.13.3",
"#bower_components/bootstrap-select": "snapappointments/bootstrap-select#1.6.4",
"#bower_components/font-awesome": "FortAwesome/Font-Awesome#~4.2.0",
"#bower_components/jquery": "jquery/jquery-dist#~2.1.3",
"#bower_components/jquery-ui": "components/jqueryui#~1.11.2",
"#bower_components/jquery-ujs": "rails/jquery-ujs#1.0.3",
"#bower_components/jqueryui-touch-punch": "furf/jquery-ui-touch-punch#*",
"#bower_components/lodash": "lodash/lodash#~2.4.1",
"#bower_components/spin.js": "fgnass/spin.js#~2.0.1",
"#bower_components/string-mask": "the-darc/string-mask#0.2.0",
"bower": "~1.3.11",
"jquery": "^3.5.1"
}
}
And my application.rb:
require File.expand_path('../boot', __FILE__)
require 'rails/all'
require 'csv'
Bundler.require(:default, Rails.env)
module Findum
class Application < Rails::Application
config.time_zone = 'Eastern Time (US & Canada)'
# The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
# config.i18n.default_locale = :de
config.encoding = "utf-8"
config.filter_parameters += [:password]
config.active_support.escape_html_entities_in_json = true
config.active_record.schema_format = :sql
config.active_record.raise_in_transactional_callbacks = true
config.assets.enabled = true
config.assets.version = '1.0'
config.assets.initialize_on_precompile = false
# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
# Add Bower components
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
config.secret_key_base = 'findum'
config.eager_load = false
config.autoload_paths += Dir[Rails.root.join('app', 'models', '**/')]
config.autoload_paths += Dir["#{config.root}/lib/**/"]
config.i18n.enforce_available_locales = true
end
end
Update:
It looks like it was a problem with my post-Bower configuration (I migrated from Bower --> Yarn) I was able to solve Sprockets errors by adding this line to my assets.rb:
Rails.application.config.assets.paths << Rails.root.join('node_modules')
and by running yarn add <package name> for files that Sprockets could not locate.
I also made the following updates to old package names in my `application.rb'
//= require lodash
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require cloudinary/jquery.fileupload
//= require cloudinary/jquery.cloudinary
//= require angular
//= require angular-resource
//= require angular-animate
//= require angular-bootstrap
//= require angular-sanitize
//= require angular-rails-templates
//= require_tree ../templates
//= require bootstrap
//= require external/picker
//= require external/picker.date
//= require angular-filter/dist/angular-filter
//= require swipebox
//= require angular-ui-sortable
//= require bootstrap-select
//= require string-mask/src/string-mask
//= require_tree .
I'm working on autocomplete part in rails. I am using 'jquery-ui-rails' gem. while using $(document).ready it is working but it I use $( document ).on('turbolinks:load', function() {} it is not working because of materialize-sprockets.
If I remove //= require materialize-sprockets in application.js then it working. if I add that line then it is not working. I need materialize-sprockets for design purpose.
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.1'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# Use sqlite3 as the database for Active Record
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'materialize-sass'
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported
runtimes
# gem 'mini_racer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read
more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
gem 'jquery-turbolinks'
# Build JSON APIs with ease. Read more:
https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
application.js
//= require jquery
//= require jquery-ui
//= require rails-ujs
//= require jquery-ui/widgets/autocomplete
//= require autocomplete-rails
//= require materialize-sprockets
//= require activestorage
//= require turbolinks
//= require_tree .
_form.html.erb
<div class="field">
<%= f.label :category_id %><br />
<%= f.text_field :category_name, data: { autocomplete_source:
categories_path} %>
</div>
categories_controller.rb
def index
#categories = Category.order(:name).where("name like ?", "%#
{params[:term]}%")
render json: #categories.map(&:name)
end
product.js
$( document ).on('turbolinks:load', function() {
$("input#product_category_name").autocomplete({
source: $('#product_category_name').data('autocomplete-source')
});
})
routes.rb
resources :products
resources :categories
How to use $( document ).on('turbolinks:load') with
//= require materialize-sprockets ?
I have an error when I try to include jquery.ui.all. All worked perfectly befor that I reboot my computer but now I have this error :
couldn't find file 'jquery.ui.all'
I rebooted my server, I try to clear the cache from the Rails console and on my navigators and I still have the problem. I also tried to to delete the Gemfile.lock and run bundle install and still the same error.
Here my both application.js and application.css :
//= require ./plugins/jquery-1.10.2.min
//= require jquery_ujs
//= require fullcalendar
//= require jquery.ui.all
//= require ./plugins/jquery-migrate-1.2.1.min
//= require ./plugins/bootstrap/js/bootstrap.min
//= require turbolinks
//= require underscore-min
//= require gmaps_google
*= require_self
*
* CSS Global Compulsory
*= require ./plugins/bootstrap/css/bootstrap.min
*= require style
*
* CSS Implementing Plugins
*= require ./plugins/line-icons/line-icons
*= require ./plugins/font-awesome/css/font-awesome.min
*= require ./plugins/flexslider/flexslider
*= require ./plugins/bxslider/jquery.bxslider
*= require ./plugins/layer_slider/css/layerslider
*= require ./plugins/hover-effect/css/custom-hover-effects
*= require ./plugins/sky-forms/version-2.0.1/css/custom-sky-forms
*
* CSS Theme
*= require ./themes/orange.css
*
* CSS Customization
*= require custom
*= require fullcalendar
*= require jquery.ui.all
*/
And my Gemfile :
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use mysql2 as the database for Active Record
gem "mysql2", "~> 0.3.15"
# gem "mysql2", "0.3.11"
# Use PostgreSql at the database for Active Record
gem "pg"
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.2'
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
# Bundle Pagination
gem 'will_paginate', '~> 3.0'
gem 'will_paginate-bootstrap'
# Authentification, Authorize, Roling
gem 'omniauth'
gem 'devise'
gem 'omniauth-google-oauth2'
gem 'cancan'
gem 'rolify', :git => "git://github.com/EppO/rolify.git"
# Géolocalisation
gem 'geocoder'
gem 'gmaps4rails'
# API Builder
gem 'rabl'
# Json Parser
gem 'oj'
# Upload de Fichier
gem "paperclip", "~> 4.1"
# Fullcalendar
gem 'fullcalendar-rails'
Ok I find the problem,
The problem is from the update of the gem jquery-ui-rails. Befor the include was :
jquery.ui.all
and now :
jquery-ui
Hope that it can me helpful
I have a problem, I think my problem is with assets, because it works in Development environment but does not work in Production.
I'm using DataTables in my app, it's works in development mode.
I follow all steps in this link:
https://github.com/rweng/jquery-datatables-rails
I searched for answers and I found many posts. I tried all, but still could not solve the issue.
P.S.: If I execute: RAILS_ENV=production bundle exec rake assets:precompile, datatable stops working in development mode too.
in Gemfile:
source 'https://rubygems.org'
gem 'rails', '~> 3.2.16'
gem 'mysql2', '~> 0.3.14'
# Autenticação
gem 'authlogic', '~> 3.3.0'
# Autorização
gem 'cancan'
# Anexos
gem 'paperclip', '~> 3.0'
# Mailer
gem 'mail', '~> 2.5.4'
# Custom select
gem "bootstrap-select-rails", "~> 1.3.0"
#
gem 'whenever', :require => false
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '~> 1.0.3'
gem 'therubyracer', '~> 0.12.0'
end
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
gem 'less-rails'
gem 'jquery-rails'
gem 'jquery-ui-rails', '~> 4.1.1'
# twitter bootstrap css & javascript toolkit
gem 'twitter-bootswatch-rails', '~> 3.0.3'
# twitter bootstrap helpers gem, e.g., alerts etc...
gem 'twitter-bootswatch-rails-helpers'
# To use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.0.0'
# To use Jbuilder templates for JSON
# gem 'jbuilder'
# Use unicorn as the app server
# gem 'unicorn'
# Deploy with Capistrano
# gem 'capistrano'
# To use debugger
# gem 'debugger'
assets/javascripts/aplication.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.ui.all
//= require jquery.ui.tabs
//= require jquery.ui.tabs.min
//= require bootstrap-tabs
//= require interns
//= require systems_analysts
//= require generics
//= require file_field
//= require bootstrap-filestyle
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
//= require cocoon
assets/javascripts/interns.js
// Ordenação dos Grids por coluna
$(document).ready(function() {
$('#hr_curriculum_interns').dataTable({
"aoColumnDefs": [ // Ordenação desativada nas colunas com actions
{ 'bSortable': false, 'aTargets': [ 5, 6, 7, 8 ] }
],
"bPaginate": false,
"bFilter": false,
"bInfo": false
});}
);
assets/stylesheets/application.css
/* Cerulean
* Bootswatch
*= require_self
*= require jquery.ui.all
*= require cerulean/loader
*= require cerulean/bootswatch
*= require_tree ./custom/
*= require jquery.ui.theme
*= require jquery.ui.core
*= require dataTables/jquery.dataTables.bootstrap
*/
Any idea please?
Your issue is probably because of Rails Asset pipelining in production.
Try this..........
In config/initializers
config.assets.precompile += %w( *.js *.css )
and In environments/production.rb
config.serve_static_assets = true
then
RAILS_ENV=production rake assets:precompile
then check
RAILS_ENV=production rails s
I have a Rails 3.1 app that uses the foundation-rails gem and the jquery-rails gem and everything seems to be working. I tried to add the jquery-ui-rails gem to the mix and ran bundle install and everything looks good. Here is the relevant part of my gemfile:
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sqlite3'
gem 'mysql2'
gem 'devise'
gem 'omniauth'
gem 'omniauth-facebook', '1.4.0'
gem 'omniauth-google-oauth2'
gem 'jquery-rails'
gem 'json'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.1.4'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
gem 'foundation-rails'
gem 'jquery-ui-rails'
end
Here is application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require foundation
//= require_tree .
$(function(){ $(document).foundation(); });
Here is application.css:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require foundation_and_overrides
*= require_tree .
*/
/*
*= require jquery.ui.all
*/
I have a page that includes the following code:
<ul id='sortable_list'>
<% #list.items.each do |item| %>
<li><%=item.name%></li>
<%end%>
</ul>
</div>
</div>
<script>
$(function() {
$( "#sortable_list" ).sortable();
$( "#sortable_list" ).disableSelection();
});
</script>
The list is not sortable when the page loads and I get a "Uncaught ReferenceError: $ is not defined". I'm at my wits end - help, please!
OK, so the issue was the current version of Foundation (5.0.2). The documentation says that its script tag should be placed right before the closing tag. I put my script_tag for application.js there and, apparently, jQuery likes to be loaded in the head. So I moved //= require foundation out of application.js, moved <%= javascript_include_tag "application" %> back to the head, and added <%= javascript_include_tag "foundation" %> by itself at the bottom of the document. I figure this will work until they fix the bug in 5.0.2 that requires that it be loaded at the end of the body.