I tried to get rack-pjax working on my rails app according to this railscast, but I have noticed no change, nor any errors. Here are the pertinent files:
gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.13'
gem 'bootstrap-sass', '2.1'
gem 'simple_form'
gem 'rspec'
gem 'pg'
gem 'koala', '~> 1.7.0rc1'
gem 'rack-pjax'
gem 'jquery-rails'
gem 'fancybox-rails'
group :development, :test do
gem 'sqlite3'
end
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
end
config/application.rb:
require File.expand_path('../boot', __FILE__)
require 'rails/all'
if defined?(Bundler)
Bundler.require(*Rails.groups(:assets => %w(development test)))
end
module Prestongunderson
class Application < Rails::Application
config.middleware.use Rack::Pjax
config.encoding = "utf-8"
config.filter_parameters += [:password]
config.active_support.escape_html_entities_in_json = true
config.active_record.whitelist_attributes = true
config.assets.enabled = true
config.assets.version = '1.0'
end
end
app/assets/javascripts/application.js:
//= require jquery
//= require fancybox
//= require jquery_ujs
//= require jquery.pjax
//= require_tree .
app/assets/javascripts/static_pages.js.coffee:
$(document).ready ->
jQuery ->
$("a.fancybox").fancybox()
jQuery ->
$('.local-nav a').pjax('[data-pjax-container]')
app/views/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<%= render 'layouts/header' %>
<%= render 'layouts/subscribe' %>
<%= render 'layouts/soundcloud' %>
<%= render 'layouts/tweet-stream' %>
<body>
<div data-pjax-container>
<%= yield %>
</div>
<%= render 'layouts/footer' %>
<%= render 'layouts/google_analytics' %>
</body>
</html>
app/views/layouts/_header.html.erb
<header>
...
<ul>
<% ["Home", "Bio", "Gallery", "Music", "Tour", "Videos", "Contact"].each do |page| %>
<li><%= link_to( page.upcase, #title == page ? "#" : "/#{page.downcase}", class: "local-nav") %></li>
<% end %>
...
</ul>
...
</header>
Is it possible for me to have conflicting code somewhere? Are there some other dependencies I'm missing?
Edit
This is supposed to use Ajax to load only the data in the div with the data-pjax-container on a link request. Instead, it loads the entire page. I test this by playing a song in the media player I have in a side bar, rendered in layout _soundcloud.html.erb, outside of the yeild. When clicking a link set up with pjax, it should only update the single div, but it loads a whole new page, and stops the music.
The jquery-pjax API that you use seems to be outdated now. According to the docs, this line
$('a.local-nav').pjax('[data-pjax-container]')
should be
$(document).pjax('a.local-nav', '[data-pjax-container]')
Btw, you should use a.local-nav selector instead of .local-nav a if you set local-nav class to the link.
I have similar experience though using pjax-rails, but the reason should be the same on JS side.
A very possible reason is it takes a bit long for your development server to response. Pjax can't wait so long by default, so it falls back to normal HTTP request.
The solution is to add time out option on JS
$('.local-nav a').pjax('[data-pjax-container]', {timeout: 2000})
pjax breaks when redirect involved in request cycle. Check it aswel.
Related
Receiving an error (ExecJS::ProgramError in Pages#home) when I run rails server and load my page after I install bootstrap 4 ruby gem.
Completely new to Ruby on rails and largely programming so bear with me. I'm running through the One month rails tutorial (https://onemonth.com/courses/rails/curriculum) and hitting a sticking point at the installing bootstrap 4 point. I'm using windows 10 vs Mac OS for the tutorial.
I've tried running through the same directions for installing bootstrap 4 as the course uses (https://www.diycode.cc/projects/twbs/bootstrap-rubygem) as well as the latest directions (https://github.com/twbs/bootstrap-rubygem). I get the same error either way, but my latest attempt runs through the steps below.
Steps
Add bootstrap to your Gemfile:
gem 'bootstrap', '~> 4.2.1'
bundle install
Import Bootstrap styles in app/assets/stylesheets/application.scss:
// Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
renamed application.css to application.scss in app/assets/stylesheets/
add the jquery-rails gem to your Gemfile:
gem 'jquery-rails'
bundle install
Add Bootstrap dependencies and Bootstrap to your application.js:
//= require jquery3
//= require popper
//= require bootstrap-sprockets
I've also tried removing
gem 'duktape'
from my gemfile as has been suggested elsewhere but had no luck.
Gemfile
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.3.3'
gem 'rails', '~> 5.2.2'
gem 'sqlite3'
gem 'puma', '~> 3.11'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'duktape'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'jquery-rails'
gem 'bootsnap', '>= 1.1.0', require: false
gem 'bootstrap', '~> 4.2.1'
group :development, :test do
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
gem 'web-console', '>= 3.3.0'
end
group :test do
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
gem 'chromedriver-helper'
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
application.scss
// Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
pages_controller.rb
class PagesController < ApplicationController
def home
end
end
application_controller.rb
class ApplicationController < ActionController::Base
end
home.html.erb
<h1>Welcome to my website!</h1>
<p>Sign up here</p>
<p>Teams</p>
<p>Standings</p>
<p>Schedules</p>
<p>Stats</p>
When I run rails server the page comes up saying "ExecJS::ProgramError in Pages#home"
Showing C:/omrails/app/views/layouts/application.html.erb where line #8 raised:
undefined not callable
Rails.root: C:/omrails
(execjs):1
app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html_erb__882755417_31415124'
My code in views/layouts/application.html.erb looks as follows:
<!DOCTYPE html>
<html>
<head>
<title>One Month Rails</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= link_to "Home", root_path %>
<%= link_to "About", about_path %>
<%= link_to "Contact us", contact_path %>
<%= yield %>
</body>
</html>
I've got a Rails 4.2 app that I've deployed with Heroku and I've tried to add Google Analytics to it. However, Google Analytics isn't picking up any sessions.
Any suggestions why and how to resolve this?
CODE
/app/layouts/_footer.html.erb:
<% if Rails.env.production? %>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'herokuapp.com');
ga('send', 'pageview');
</script>
<% end %>
/app/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<%= Gon::Base.render_data({}) %>
<%= 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.0">
</head>
<body>
<div class="container">
<%= yield %>
</div>
<%= render 'layouts/footer' %>
</body>
</html>
/app/assets/javascripts/analytics.js.coffee:
$(document).on 'page:change', ->
if window._gaq?
_gaq.push ['_trackPageview']
else if window.pageTracker?
pageTracker._trackPageview()
/app/assets/javascripts/application.js:
//= require jquery
//= require analytics
//= require bootstrap
//= require jquery_ujs
//= require jquery.ui.all
//= require Chart
//= require jquery.turbolinks
//= require lodash
//= require_tree .
Gemfile:
source 'https://rubygems.org'
gem 'rails', '4.2.2'
gem 'bootstrap-sass', '3.2.0.0'
gem 'sass-rails', '5.0.2'
gem 'uglifier', '2.5.3'
gem 'coffee-rails', '4.1.0'
gem 'jquery-rails', '4.0.3'
gem 'jquery-ui-rails', '~> 4.2.1'
gem 'turbolinks', '2.3.0'
gem 'jquery-turbolinks'
gem 'jbuilder', '2.2.3'
gem 'sdoc', '0.4.0', group: :doc
gem 'chart-js-rails'
gem 'gon'
gem 'lodash-rails'
group :development, :test do
gem 'sqlite3', '1.3.9'
gem 'byebug', '3.4.0'
gem 'web-console', '2.0.0.beta3'
gem 'spring', '1.1.3'
end
group :production do
gem 'pg', '0.17.1'
gem 'rails_12factor', '0.0.2'
end
The way you are adding your script is the wrong way, since it will not work due to Turbolinks, you know the code you have in your _footer won't be running as expected since that piece of markup won't reload because of Turbolinks.
I will give you my custom implementation of google analytics for all my rails apps.
In your app/assets/javascripts create a new file called google_analytics.js.coffee and add the following script:
class #GoogleAnalytics
#load: ->
# Google Analytics depends on a global _gaq array. window is the global scope.
window._gaq = []
window._gaq.push ["_setAccount", GoogleAnalytics.analyticsId()]
# Create a script element and insert it in the DOM
ga = document.createElement("script")
ga.type = "text/javascript"
ga.async = true
ga.src = ((if "https:" is document.location.protocol then "https://ssl" else "http://www")) + ".google-analytics.com/ga.js"
firstScript = document.getElementsByTagName("script")[0]
firstScript.parentNode.insertBefore ga, firstScript
# If Turbolinks is supported, set up a callback to track pageviews on page:change.
# If it isn't supported, just track the pageview now.
if typeof Turbolinks isnt 'undefined' and Turbolinks.supported
document.addEventListener "page:change", (->
GoogleAnalytics.trackPageview()
), true
else
GoogleAnalytics.trackPageview()
#trackPageview: (url) ->
unless GoogleAnalytics.isLocalRequest()
if url
window._gaq.push ["_trackPageview", url]
else
window._gaq.push ["_trackPageview"]
window._gaq.push ["_trackPageLoadTime"]
#isLocalRequest: ->
GoogleAnalytics.documentDomainIncludes "local"
#documentDomainIncludes: (str) ->
document.domain.indexOf(str) isnt -1
#analyticsId: ->
# your google analytics ID(s) here...
'UA-xxxxxxxx-x'
GoogleAnalytics.load()
As you can see it adds support for Turbolinks, this is a clean and better way to add Google analytics to your app. Hope it works for you.
I've added to gemfile, bundle installed and bundle updated twitter-bootstrap-rails gem and all of the dependency gems that i need as per here, yet none of the styles in my layout file a rendering? Can anyone see what I'm doing wrong or perhaps whether i'm missing an important require somewhere?
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.1'
# Use postgresql as the database for Active Record
gem 'pg'
# 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
# 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
gem 'devise'
gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# 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'
gem 'rspec-rails'
end
group :test do
gem 'capybara'
gem 'pry-rails'
gem 'shoulda-matchers', github: 'thoughtbot/shoulda-matchers'
end
stylesheets/application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*= require bootstrap_and_overrides
*= require_tree .
*= require_self
*/
stylesheets/bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
// Set the correct sprite paths
#iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
#fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
#fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
#import "fontawesome/font-awesome";
// Glyphicons
//#import "twitter/bootstrap/glyphicons.less";
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// #link-color: #ff0000;
javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
layouts/application.html.erb:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Odot2</title>
<!-- Latest compiled and minified CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Odot2</a>
</div>
<div class="user-links collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<% if user_signed_in? %>
<li role='presentation'><%= link_to('Logout', destroy_user_session_path,
:method => :delete) %></li>
<li role='presentation'><%= link_to('Edit registration',
edit_user_registration_path) %></li>
<% else %>
<li role='presentation'><%= link_to('Login', new_user_session_path) %></li>
<li role='presentation'><%= link_to('Register', new_user_registration_path) %></li>
<% end %>
</ul>
</div>
</div>
</nav>
<div class="flash panel">
<% flash.each do |type, message| %>
<div class='<%= build_alert_classes(type) %>'>
<%= message %>
</div>
<% end %>
</div>
<main>
<div class="container-fluid">
<%= yield %>
</div>
</main>
</body>
</html>
I used the Bootstrap-sass gem and it works fine.
gem 'bootstrap-sass'
//= require bootstrap
and then in a file called "Bootstrap_and_customization.css.scss" I have:
#import url(http://fonts.googleapis.com/css?family=Lato:400,700);
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
I've been trying to connect bootstrap framework to my project by following this documentation and I can't set it up for some reason.
Why is it?
assets/stylesheets/application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
#import "bootstrap-sprockets";
#import "bootstrap";
*
*= require bootstrap3-editable/bootstrap-editable
*= require_tree .
*= require_self
*/
assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap3-editable/bootstrap-editable
//= require_tree .
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Greenbull</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="container">
<div id="user_header">
<% if current_user %>
Logged in as <%= current_user.full_name %>
<%= link_to "Log Out", logout_path("current"), method: 'delete' %><br />
<p><%= link_to "My tasks", user_tasks_path(current_user) %>
<% else %>
<%= link_to "Sign Up", signup_path %> or
<%= link_to 'Log In', login_path %>
<% end %>
</div>
<% flash.each do |message_type, message| %>
<div class="flash-<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
</body>
</html>
Gemfile
source 'https://rubygems.org'
group :development, :test do
gem 'rspec-rails', '~> 3.0'
end
# 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
# 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
# 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'
# 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'
gem 'bcrypt'
gem 'pry'
gem 'pg'
gem 'bootstrap-x-editable-rails'
gem 'bootstrap-sass'
end
I have installed bootstrap-sass 3.3.5.1, sass-rails 5.0.3.
Any help?
Read the instructions of the bootstrap-sass gem and follow their conventions https://github.com/twbs/bootstrap-sass.
Import Bootstrap styles in app/assets/stylesheets/application.scss:
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
I added the best_in_place gem to my project and the update does NOT take effect until a page reload has happened. I can see it flash in my show view but it requires a page reload. Why is this?
My Lists controller:
respond_to :html, :xml, :js
def update
#list = List.find(params[:id])
#list.update_attributes(params[:list])
respond_with(#list, :location => list_url(#list))
end
My Lists show view-
<h2 class="page-header"><%= best_in_place #list, :name %></h2>
<h2 class="lead"><%= best_in_place #list, :description %></h2>
My gemfile-
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'best_in_place'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'jquery-ui-rails'
gem 'uglifier', '>= 1.0.3'
end
My application js manifest -
//= require jquery
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require justgage
//= require raphael.min
//= require jquery.purr
//= require best_in_place
//= require_tree .
My lists coffee-
jQuery ->
$('#task_due_date').datepicker
dateFormat: 'mm/dd/yy'
jQuery ->
$('.best_in_place').best_in_place()
Could it be the order of my manifest js files? What am I overlooking here to get the update to take without a page reload? Thanks for your attention.
I simply forgot to add the respond_to :json at the top of my lists controller. Thanks to those that took a look.