My pages are being loaded twice (the first time is pretty fast btw). Besides that, I must refresh the page to have my js working.
application.html.erb
<head>
<title><%= content_for?(:title) ? yield(:title) : "ASC Engenharia e Construções" %> </title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require fancybox
//= require flash.js
//= require acompanhamento.js
//= require controle_de_obras.js.coffee
//= require documentos.js.coffee
//= require funcionarios.coffee
//= require galeria.coffee
//= require turbolinks
I've already executed rails assets:clean. Have already deleted public/asstets directory and have checked that it is not chrome bug.
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.4'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# 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'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
gem "font-awesome-rails"
gem 'bootstrap-sass', '~> 3.3.6'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks', '~> 5.0.0'
gem 'jquery-turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'devise', '~> 3.4.1'
gem "paperclip", "~> 5.0.0"
gem 'fancybox2-rails', '~> 0.2.8'
gem "rails_admin"
gem "prawn"
gem 'prawn-table', '~> 0.1.0'
gem "rails_admin_import", "~> 2.0"
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
You require everything with //= require_tree ., and on top of that you require all the ones above twice. Get rid of the last line and require all your js files manually. Hope this helps!
// load jQuery, turbolinks, and ujs
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
// load all scripts
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require bootstrap-sprockets
//= require fancybox
// load turbolinks
//= require turbolinks
// get rid of this line
//= require_tree . <-- this line requires all js files
Either of these two options are "guaranteed to work" as per the docs, reference provided below:
$(document).ready(function () { /* ... */ });
or
$(function () { /* ... */ });
To read more the documentation is here
Related
I'm trying to set up my first Rails 7 app and have installed Bootstrap 5 properly (you can see by the CSS) and gotten rid of all the error messages, but the javascript functions (i.e. dropdown menus, offcanvas, etc.) aren't working.
I have tested it with this code:
<script>
$( document ).ready(function() {
console.log( "document ready!" );
$( "#TEST" ).click(function() {
console.log( "clicked!" );
});
});
</script>
And both console.log statments produce the correct result, leading me to believe js and jquery are working properly and it is something with bootstrap.
Here's my gemfile:
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '3.1.0'
# RAILS GENERATED STUFF
gem 'rails', '~> 7.0.1'
gem 'pg', '~> 1.1'
gem 'puma', '~> 5.0'
gem 'sass-rails', '>= 6'
# gem 'webpacker', '~> 5.0'
gem 'jsbundling-rails'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.4', require: false
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
# OTHER NECESSARY STUFF
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'sprockets-rails'
gem 'bcrypt', '~> 3.1.7'
gem 'gon'
# ESSENTIALS
gem 'devise'
gem 'simple_form'
gem 'font_awesome5_rails'
gem 'friendly_id', '~> 5.2.0'
gem 'tinymce-rails'
gem 'invisible_captcha'
gem 'figaro'
gem 'high_voltage', '~> 3.1'
gem 'bootstrap', '~> 5.1', '>= 5.1.3'
# FOR IMAGES
gem 'mini_magick'
gem 'aws-sdk' , '~> 3'
gem 'aws-sdk-s3', require: false
group :development, :test do
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
gem 'pry-rails'
gem 'better_errors'
end
group :development do
gem 'web-console', '>= 4.1.0'
gem 'rack-mini-profiler', '~> 2.0'
gem 'listen', '~> 3.3'
gem 'spring'
end
group :test do
gem 'capybara', '>= 3.26'
gem 'selenium-webdriver'
gem 'webdrivers'
end
Here's my application.js, which lives in 'javascript/controllers/application.js but somehow also inassets/builds/application.js. I'm not using webpack, rather rollup installed with $ ./bin/rails javascript:install:rollup`:
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "controllers"
import 'offcanvas';
//= require jquery3
//= require jquery_ujs
//= require jquery-ui
//= require popper
//= require bootstrap
//= require activestorage
//= require font_awesome5
//= require tinymce
window.jQuery = $;
window.$ = $;
Can anyone see where I'm going wrong?
I had the same problem.
I got things working by adding the bundle script from Bootstrap in the between the body tags of the application.html.erb file:
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<%= yield %>
</body>
I had some major problems with this. To fix, go into app/javascript/application.js and change this
import "#hotwired/turbo-rails"
to this
import { Turbo } from "#hotwired/turbo-rails"
Turbo.session.drive = false
Also, always use bin/dev to start the rails server in development, rather than the rails server command.
Further info
See here for more info
I'm new to Ruby and following http://guides.rubyonrails.org/getting_started.html and am
stuck at destroying the article. It won't bring up the dialog to delete but just redirects to the article. Can someone help me delete the article? I know it has to do with javascript but can't figure out. Thanks in advance.
These are my settings:
GEMFILE
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.3'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# 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'
# See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
gem 'execjs'
# Use jquery as the JavaScript library
gem 'jquery-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', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
...
application.html.erb
...
<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
...
javascript line gave me an execjs error in browser so I changed 'application' to 'default' and it was ok.
application.js
...
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
index.html.erb
...
<% #articles.each do |article| %>
<tr>
...
<td><%= link_to 'Destroy', article_path(article),
method: :delete,
data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
I see you already have:
gem 'therubyracer', platforms: :ruby
gem 'execjs'
in your Gemfile.
You should just run:
bundle install
to install the gems and re-start the server.
Everything should work afterwords!
Alternatively, just install another Javascript runtime library such as Node.js and it should work!
Update
Replace defaults with application in your application.html.erb file and add: gem 'coffee-script-source' to your Gemfile and run: bundle install
Your problem should be fixed by now.
I publish my rails 4.1.7 app into Heroku the other day, css seems to working fine.
But javascript files responding partially. I have an alert("In Charts-other.js");
*$(document).ready(function(){
alert("in Charts-Other.js");...
...*
to get some response, and nothing.
SOLVED:
In application.js I moved the file with the error to the bottom. Everything seems to work fine.
In Heroku app link I have a direct access to all the files through: /assets/clever/java_script_files.js
config/environments/production.rb
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif *.svg *.ico *.eot *.ttf)
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_assets = true
config.assets.js_compressor = :uglifier
config.assets.compile = true
config.assets.digest = true
config.log_level = :info
config.active_support.deprecation = :notify
config.log_formatter = ::Logger::Formatter.new
config.active_record.dump_schema_after_migration = false
end
config/application.rb
require File.expand_path('../boot', __FILE__)
require 'rails/all'
Bundler.require(*Rails.groups)
module Website
class Application < Rails::Application
config.assets.paths << Rails.root.join('vendor','assets', 'fonts','clever')
config.assets.enabled = true
config.serve_static_assets = true
end
end
/Gemfile
source 'https://rubygems.org'
ruby '2.2.0'
gem 'sprockets', '~> 2.12.3'
gem 'rails', '4.1.7'
gem 'pg'
gem 'therubyracer'
gem 'jquery-rails'
gem 'jquery-ui-rails', '~> 5.0.3'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'spring', group: :development
gem 'httparty', '~> 0.13.3'
gem 'nokogiri'
gem 'byebug'
gem 'mechanize', '~> 2.7.3'
gem 'watir', '~> 5.0.0'
gem 'watir-webdriver', '~> 0.6.11'
gem 'unicorn'
gem 'sidekiq', '~> 3.3.0'
gem 'sinatra', require: false
gem 'slim'
gem "bcrypt", :require => "bcrypt"
gem 'shoulda-matchers', '~> 2.7.0'
gem 'font-awesome-rails', '~> 4.2.0.0', group: :production
gem 'curb', '~> 0.8.6'
gem 'chronic', '~> 0.10.2'
gem 'bunny', '~> 1.6.3'
gem 'jquery-turbolinks'
group :production do
gem 'rails_12factor'
end
group :assets do
gem 'sass-rails', '~> 4.0.3'
gem 'coffee-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'wrap-bootstrap-rails', '~> 0.0.3'
end
/app/assets/javascript/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require clever/jquery-2.1.0.min.js
//= require clever/jquery-migrate-1.2.1.min.js
//= require clever/bootstrap.min.js
//= require clever/jquery-ui.min.js
//= require clever/jquery.sparkline.min.js
//= require clever/jquery.knob.modified.min.js
//= require clever/uncompressed/d3.js
//= require clever/uncompressed/xcharts.js
//= require clever/jquery.easy-pie-chart.min.js
//= require clever/raphael.min.js
//= require clever/justgage.1.0.1.min.js
//= require clever/custom.min.js
//= require clever/core.min.js
//= require clever/pages/charts-xcharts.js
//= require clever/pages/charts-other.js
//= require clever/pages/charts-flot.js
//= require clever/uncompressed/jquery.flot.js
//= require clever/pages/ui-sliders-progress.js
//= require clever/jquery.ui.touch-punch.min.js
//= require clever/jquery.sparkline.min.js
//= require clever/fullcalendar.min.js
//= require clever/jquery.flot.pie.min.js
//= require clever/jquery.flot.stack.min.js
//= require clever/jquery.flot.resize.min.js
//= require clever/jquery.flot.time.min.js
//= require clever/jquery.flot.spline.min.js
//= require clever/jquery.autosize.min.js
//= require clever/jquery.placeholder.min.js
//= require clever/moment.min.js
//= require clever/daterangepicker.min.js
//= require clever/jquery.easy-pie-chart.min.js
//= require clever/jquery.dataTables.min.js
//= require clever/dataTables.bootstrap.min.js
//= require clever/raphael.min.js
//= require clever/morris.min.js
//= require clever/jquery-jvectormap-1.2.2.min.js
//= require clever/uncompressed/jquery-jvectormap-world-mill-en.js
//= require clever/uncompressed/gdp-data.js
//= require clever/gauge.min.js
//= require clever/uncompressed/justgage.1.0.1.js
//= require clever/pages/index.min.js
Any help will be highly appreciated
Thanks.
Eldar
SOLVED:
In application.js I moved the file with the error to the bottom.
Everything seems to work fine.
Apparently in production mode files with warnings/error act differently.
In my case, all I needed to add, to config/application.rb:
config.assets.precompile += %w(*.js)
Hello i am using kaminari gem for pagination and i want to do paginatation via ajax .
index.html.haml
#abc
= render :partial => 'anything/anything_lists', collection: #anything_upcoming, as: :anything_schedule
#paginator
= paginate #anything_upcoming, :remote => true, :param_name => "anything_upcoming_page"
index.js.haml
$('#abc').html('#{escape_javascript render(partial: "anything/anything_lists")}');
$('#paginator').html('#{escape_javascript(paginate(#anything_upcoming, :remote => true, :param_name => "anything_upcoming_page").to_s)}');
controller file:
#anything_upcoming = AnythingSchedule.anything_upcoming.page(params[:anything_upcoming_page]).per(Settings.pagination.per_page)
respond_to do |format|
format.js
format.html
end
view source shows data-remote = true but log shows Website::EventsController#index as HTML.
so what i am missing here.
Edit: i am doing some experiment on js file and i convert index.js.haml to index.js.erb and only one time i get ajax request and also shows calling JS on logs . and i redo again then as usual not get ajax request .
Final Edit
application.js
//= require jquery
//= require jquery_ujs
//= require ckeditor-jquery
//= require bootstrap.min
//= require bootstrap-datepicker.min
//= require bootstrap-timepicker.min
//= require chosen.jquery.min
//= require jquery.popupoverlay
//= require common
//= require ace-elements.min
//= require registrations
//= require courses
//= require instructors
//= require jsapi
//= require donation
//= require workshops
//= require nav_settings_dropdown
//= require events
//= require event_schedules
//= require manage_home
//= require jquery.blockUI
//= require rails
Gem file
gem 'rails', '3.2.17'
gem 'haml'
gem 'haml-rails'
gem "rails_config", "~> 0.3.3"
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-fileupload-rails'
gem 'jammit'
end
gem 'jquery-rails'
gem "kaminari", "~> 0.14.1"
you must have forgotten to include the application.js in your layout file
OR
you are using another js or layout then the default one. Please check this
Reason:
The syntax for the pagination is correct
= paginate #anything_upcoming, :remote => true, :param_name => "anything_upcoming_page"
you have also included jquery-rails gem and also included the libraries in application.js
and you are saying data-remote = true is applying to the element. So the only problem I guess left is above one.
Have a problem with adding a bootstrap less template to rails app.
getting a Less::ParseError .transition is undefined after i drop a less folder in app/assets/stylesheets Any idea how resolve this issue?
Rails 4.1
Gemfile
source 'https://rubygems.org'
gem 'rails', '4.1.0'
gem 'bootstrap-sass'
gem 'less-rails'
gem 'therubyracer'
gem 'bootstrap'
group :development, :test do
gem 'sqlite3', '1.3.8'
gem 'rspec-rails', '2.13.1'
gem "minitest"
gem 'guard-rspec', '2.5.0'
gem 'spork-rails', '4.0.0'
gem 'guard-spork', '1.5.0'
gem 'childprocess', '0.3.6'
end
group :test do
gem 'selenium-webdriver', '2.35.1'
gem 'capybara', '2.1.0'
gem 'growl', '1.0.3'
end
gem 'sass-rails'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'
group :doc do
gem 'sdoc', '0.3.20', require: false
end
group :production do
gem 'pg', '0.15.1'
gem 'rails_12factor', '0.0.2'
end
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require jquery
//= require jquery_ujs
//= require bootstrap
application.css.scss
/*
*= require_tree .
*= require_self
*= require bootstrap
*= require the-story.less
*= require config.less
*= require buttons.less
*= require bootstrap.less
*/