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
*/
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
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
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)
Update (26 February 2015):
jPushMenu.js had a handler that was making a e.preventDefault() call. If I removed this one line event handler, I stopped seeing the bad behavior. jPushMenu also has a new version of their code out now that does not use this e.preventDefault() call, which also fixes my issue. The question is below for anyone that runs into a similar problem, but likely not as their is a new version.
Question:
I'm having trouble with a link that I specify the method: :delete for in the link_to helper like this:
<li>
<%= link_to raw('<span class="glyphicon glyphicon-off"></span> Sign out'),
signout_path,
method: :delete %>
</li>
Even though I specify the method: :delete like above, and the rendered HTML does include the data-method="delete" attribute, clicking the link issues a GET request.
This has never been an issue up until I added the following file to my app/assets/javascripts/ directory: jPushMenu.js. As you can see below, I'm including this file through the application javascript manifest file with the line //= require_tree .. Basically, my signout link broke as soon as I added a different, mobile friendly bootstrap-styled navbar.
I would really like to find out how to make the push menu navbar work while also allowing my signout link to work as it did before, but I don't know what else I'm missing here. One thing I'm afraid of is that I have so many javascript files that something might be stomping over the other and maybe the order in which I load them in matters finally? Does anyone else have any ideas why this may be the case?
In regards to other StackOverflow questions that are similar:
You'll notice that my link is in a <li>...</li> tag. This is because this link appears in a bootstrap styled dropdown in my nav header object. Other StackOverflow questions (the majority of them I could find actually) suggest that using a button_to helper rather than a link_to helper will solve the problem. And it definitely works. But now I have an odd looking button in my dropdown and all the bootstrap styling is ignoring this part of the dropdown because it is looking for an <a> tag, not an <button style="button"> tag.
More directed question: Where would be a good place to debug this? If Rails handles the data-method attribute and uses javascript to issue a DELETE request, what part of the application code can I put a breakpoint?
(below are files and output that you may or may not want to look at...)
application.js:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require autocomplete-rails
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require moment
//= require bootstrap-datetimepicker
//= require bootstrap-select
//= require bootstrap-tokenfield
//= require underscore
//= require gmaps/google
//= require fullcalendar
//= require fullcalendar/gcal
//= require_tree .
...
Gemfile:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'rails'
gem 'bootstrap-sass'
gem 'sass-rails', '~> 4.0.0'
gem 'autoprefixer-rails'
gem 'bootstrap_form'
gem 'bcrypt-ruby'
gem 'faker', '1.1.2'
gem 'will_paginate'
gem 'bootstrap-will_paginate'
gem 'state_machine'
gem 'twitter_cldr'
gem 'pg'
gem 'figaro'
gem 'jquery-turbolinks'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jbuilder'
gem 'mail_form'
gem 'ransack'
gem 'momentjs-rails'
gem 'bootstrap3-datetimepicker-rails'
gem 'date_validator'
gem 'gmaps4rails'
gem 'geocoder'
gem 'bootstrap-select-rails'
gem 'fullcalendar-rails'
gem 'wepay'
gem 'omnicontacts', '~> 0.3.5', git: 'git://github.com/Diego81/omnicontacts.git'
gem 'rails4-autocomplete'
gem 'paperclip'
gem 'aws-s3'
gem 'aws-sdk'
gem 'mail'
gem 'mailboxer'
gem 'bootstrap_tokenfield_rails'
group :development, :test do
gem 'better_errors'
gem 'binding_of_caller'
gem 'rspec-rails', '2.14.0'
gem 'guard-rspec', '2.5.0'
gem 'meta_request'
end
group :test do
gem 'selenium-webdriver', '2.35.1'
gem 'capybara', '2.1.0'
gem 'factory_girl_rails', '4.2.1'
end
group :doc do
gem 'sdoc', '0.3.20', require: false
end
group :production do
gem 'rails_12factor'
end
routes.rb
...
match '/signout', to: 'sessions#destroy', via: 'delete'
...
Output of rake routes
...
sessions POST /sessions(.:format) sessions#create
new_session GET /sessions/new(.:format) sessions#new
session DELETE /sessions/:id(.:format) sessions#destroy
...
jPushMenu.js had a handler that was making a e.preventDefault() call. If I removed this one line event handler, I stopped seeing the bad behavior. jPushMenu also has a new version of their code out now that does not use this e.preventDefault() call, which also fixes my issue. The question is below for anyone that runs into a similar problem, but likely not as their is a new version.
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.