trying to learn rails (and I'm still really early on in my development) but I've hit a wall and I'm scratching my head.
I'm trying to leverage bootstrap via bootstrap-sass, and it seems like when I use the default bootstrap navigation bar I can get the bar to render - but it's not interactive. It looks like javascript isn't working properly, but I'm not sure why.
My gemfile:
source 'https://rubygems.org'
gem 'rails'
gem 'bootstrap-sass'
gem 'sprockets'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'
gem 'sdoc', '~> 0.4.0', group: :doc
group :development do
gem 'sqlite3'
gem 'spring'
end
group :production do
gem 'pg'
gem 'rails_12factor'
end
application.css
*= require_tree .
*= require_self
app/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
config/application.rb
module FamilyLunch
class Application < Rails::Application
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
application.html.erb
<html>
<head>
<title>Family Lunch | <%= yield(:title) %> </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>
<body>
<%= render 'layouts/header' %>
<div class='container'>
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
</html>
For the JavaScript you have to add //= require bootstrap-sprockets to application.js like this :
app/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
For Solidus create an app/assets/spree/frontend/all.js and include:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
this will override the app/assets/application.js
Related
I'm starting to learn to use React with Rails. In application.html.erb I replaced
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
with
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
How do I require everything from the /assets/javascripts/application.js file?
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require cookies_eu
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap
Do I import them all at the beginning of the /javascript/packs/application.js file?
Based on a tutorial I watched, I can just keep also the:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Then everything will be loaded, though not via Webpack.
The reactJS components and javascript codes don't display on my rails 5 app. I'm using react-rails gem and some plain JS with the asset pipeline. Here's my application.js manifest:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components
//= require init
//= require page_specific
//= require rails-ujs
//= require_tree .
I have sub-directories in my javascript assets directory and have referenced them appropriately and followed the ruby assets pipelines docs but when I run the server, the navigation bar and other element aren't displaying and clicking the button doesn't work either. See the screenshot:
screenshot
My assets files setup:
screenshot 2
This is my application.html.erb file:
<!DOCTYPE html>
<html ng-app="Stories">
<head>
<title>Stories</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag '', type: 'image/png' %>
<%= favicon_link_tag '', rel: 'apple-touch-icon', type: 'image/png' %>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="<%= controller.controller_name %> <%= controller.action_name %>">
<%= render 'layouts/overlay' unless user_signed_in? %>
<%= react_component('UserOverlay', {}) %>
<div data-behavior="progress-bar" class="progress-bar"></div>
<div class="container-fluid main-container">
<%= yield %>
<%= yield :sidebar %>
</div>
</body>
<script type="text/javascript">
window.userSignedIn = <%= user_signed_in? %>;
</script>
</html>
This is the assets.rb file:
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules')
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )
Am I missing another step?
When you press enter in the address bar or refresh the page, it works like charm but as soon I click on a link in the navigation bar, some or most of the assets wont load. I already added "data-no-turbolink" => true to the link_to but no success.
This is my application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Rev</title>
<!-- FAVICON AND APPLE TOUCH -->
<link rel="shortcut icon" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-180x180.png">
<meta name="msapplication-TileImage" content="mstile.png">
<meta name="msapplication-TileColor" content="#94ccdf">
<meta name="theme-color" content="#94ccdf">
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,300i,400,400i,700,700i|Playfair+Display:400,400i" rel="stylesheet">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div id="main container">
<!-- HEADER -->
<header id="header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<!-- LOGO -->
<div id="logo">
<a href="index.html">
<%= link_to(image_tag("arrow-down.png", :alt => "arrow", :size => "150x150"), "/") %>
</a>
</div><!-- LOGO -->
</div><!-- col -->
<div class="col-sm-9">
<!-- MENU -->
<nav>
<a id="mobile-menu-button" class="waves" href="#"><i class="custom-icon-menu"></i></a>
<ul class="menu clearfix" id="menu">
<li class="megamenu">
<li class="<%= is_active?(root_path) %>"><%= link_to "Home", root_path, :"data-no-turbolink" => true %></li>
</li>
<li class="megamenu">
<li class="<%= is_active?(menu_team_path) %>"><%= link_to "Meet Team Derrick", menu_team_path, :"data-no-turbolink" => true %></li>
</li>
<li class="megamenu">
New Patient Center
</li>
<li class="megamenu">
About Us
</li>
</ul>
</nav>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</header><!-- HEADER -->
<%= yield %>
</div><!-- MAIN CONTAINER -->
</body>
</html>
application.scss #imports
#import "bootstrap-sprockets";
#import "bootstrap";
#import "plugin";
#import "fontawesome/css/font-awesome.min.css";
#import "animations/animate.min.css";
#import "calendar/beatpicker.min.css";
#import "counters/odometer-theme-default.css";
#import "fancybox/jquery.fancybox.css";
#import "custom-icons/css/custom-icons.min.css";
#import "custom-school-icons/css/custom-school-icons.min.css";
#import "custom-interface-icons/css/custom-interface-icons.min.css";
#import "custom-office-icons/css/custom-office-icons.min.css";
#import "revolutionslider/css/settings.css";
#import "revolutionslider/css/layers.css";
#import "revolutionslider/css/navigation.css";
#import "owl-carousel/owl.carousel.css";
#import "ytplayer/css/jquery.mb.ytplayer.min.css";
application.js requirements
//= require jquery/jquery-2.2.3.min.js
//= require bootstrap-sprockets
//= require viewport/jquery.viewport.js
//= require menu/hoverIntent.js
//= require menu/superfish.js
//= require fancybox/jquery.fancybox.pack.js
//= require revolutionslider/js/jquery.themepunch.tools.min.js
//= require revolutionslider/js/jquery.themepunch.revolution.min.js
//= require revolutionslider/js/extensions/revolution.extension.actions.min.js
//= require revolutionslider/js/extensions/revolution.extension.carousel.min.js
//= require revolutionslider/js/extensions/revolution.extension.kenburn.min.js
//= require revolutionslider/js/extensions/revolution.extension.layeranimation.min.js
//= require revolutionslider/js/extensions/revolution.extension.migration.min.js
//= require revolutionslider/js/extensions/revolution.extension.navigation.min.js
//= require revolutionslider/js/extensions/revolution.extension.parallax.min.js
//= require revolutionslider/js/extensions/revolution.extension.slideanims.min.js
//= require revolutionslider/js/extensions/revolution.extension.video.min.js
//= require owl-carousel/owl.carousel.min.js
//= require parallax/jquery.stellar.min.js
//= require isotope/imagesloaded.pkgd.min.js
//= require isotope/isotope.pkgd.min.js
//= require placeholders/jquery.placeholder.min.js
//= require validate/jquery.validate.min.js
//= require submit/jquery.form.min.js
//= require charts/jquery.easypiechart.min.js
//= require counters/jquerysimplecounter.js
//= require counters/odometer.min.js
//= require statistics/chart.min.js
//= require instafeed/instafeed.min.js
//= require twitter/twitterfetcher.min.js
//= require ytplayer/jquery.mb.ytplayer.min.js
//= require countdown/jquery.countdown.min.js
//= require animations/wow.min.js
//= require rails-ujs
//= require turbolinks
//= require_tree .
Gemfile
source 'https://rubygems.org'
git_source(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.1'
# Use sqlite3 as the database for Active Record
gem 'pg'
#WOW-Rails
gem 'wow-rails'
#Bootstrap
gem 'bootstrap-sass', '~> 3.3.6'
group :production do
gem 'rails_12factor'
end
# 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 'therubyracer', 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'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# 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', platforms: [:mri, :mingw, :x64_mingw]
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '~> 2.13'
gem 'selenium-webdriver'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Any help would be appreciated!
Add method: "get" with link_to.
Try below code in your nav bar:
<ul class="menu clearfix" id="menu">
<li class="megamenu">
<li class="<%= is_active?(root_path) %>"><%= link_to "Home", root_path, :"data-no-turbolink" => true, method: "get" %></li>
</li>
<li class="megamenu">
<li class="<%= is_active?(menu_team_path) %>"><%= link_to "Meet Team Derrick", menu_team_path, :"data-no-turbolink" => true, method: "get" %></li>
</li>
<li class="megamenu">
New Patient Center
</li>
<li class="megamenu">
About Us
</li>
</ul>
I can't get it to work. I've followed the installation process described here. Other solutions on this site have not helped. I keep getting this error on Developers tools
static_pages.self-8c8a5c3….js?body=1:7 Uncaught TypeError:
JQuery(...).best_in_place is not a function
On the controller's coffee file:
$(document).on 'ready page:load', ->
jQuery(".best_in_place").best_in_place();
return
I've also tried calling it on the view itself
<script type = 'text/javascript'>
$(document).ready(function() {
/* Activating Best In Place */
jQuery(".best_in_place").best_in_place();
});
</script>
application.js
//= require jquery
//= require best_in_place
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require best_in_place.jquery-ui
//= require bootstrap
//= require turbolinks
//= require_tree .
I've even tried without best_in_place.jquery-ui and changing the order below require_tree of both best_in_place
This is my Gemfile:
gem 'rails', '4.2.6'
gem 'sqlite3'
gem 'devise', '~> 3.5', '>= 3.5.6'
gem 'best_in_place', '~> 3.0.1'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'jquery-ui-rails', '~> 5.0', '>= 5.0.5'
gem 'simple_form'
gem 'turbolinks'
gem 'jquery-turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'haml-rails', '~> 0.9.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'sass-rails', '~> 5.0'
gem 'will_paginate', '~> 3.1'
gem 'bootstrap-editable-rails', '~> 0.0.9'
I've tried with gem 'best_in_place', github: 'bernat/best_in_place' as some sites suggested.
I was redefining the Jquery Library. As expressed in the documentation, Best-in-place should be placed after Jquery on application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require best_in_place
//= require best_in_place.jquery-ui
But my applications.html.erb had the following :
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
overwriting my previous declaration.
I have several javascript plugins in my app already and they work find (select2, bootstrap-datetimepicker, ckeditor, ace, chartkick)
trying to get jquery-ui running to add some sortable lists/tables.
Can't get Jquery-ui running in a rails 4 app...
# Gemfile
gem 'therubyracer', platforms: :ruby
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'non-stupid-digest-assets', '~> 1.0.4'
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
// = require jquery.ui.all
# app/views/rates/show.html.erb
<ul id="rates">
<% #plan.rate_items.each do |rate| %>
<%= content_tag_for(:li, rate) do %>
<%= rate.name %>
<% end %>
<% end %>
</ul>
<%= content_for :page_javascript do %>
<script>
$(document).ready(function(){
$("#rates").sortable();
});
</script>
<% end %>
When I look at the console I just get:
TypeError: $(...).sortable is not a function
Looks like a typo with the '=' sign not touching ' //'
Change to
//= require jquery.ui.all
http://guides.rubyonrails.org/asset_pipeline.html
i think it should be:
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.all
//= require_tree .