I'm attempting to keep the application layout in my Rails 3 app for the stylesheets and javascript files I use most frequently (application.js, jquery, style, etc.). However there are plugins I'm using on certain pages and want to include those stylesheets/javascripts properly. For example, I'm looking to use slides only on my homepage. If my application layout is like the one below, what's the best way to include page-specific files?
<!doctype html>
<head>
<title>Title</title>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="screen and (min-width:481px)">
<!--[if IE]>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="all"><![endif]-->
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no,width=device-width">
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>
Related
New developper on RoR, I’m using Select2 to display some companies or departments.
Select2 was working fine for some weeks, and now, display is broken on every select2 input.
I used github history to detect why it’s failing now, but no indications of modifications which can explain that.
It's displaying a very small square or nothing. However, selecty2 is working when I click on the small square for exemple.
small square display,
Select2 working but display is broken
I used Github History pomber and inspect all files concerned. Nothing to explain why the display is broken now. Is the a way to detect the cause of the issue ?
I'm using Bootstrap 4 with rails 5.2.1
app/javascript/components/select2.js :
import $ from 'jquery';
import 'select2';
import 'select2/src/scss/core.scss';
import 'select2-bootstrap4-theme/dist/select2-bootstrap4.css';
$('.select2-form').select2({
theme: "bootstrap4"
});
// Requiring CSS! Path is relative to ./node_modules
app/javascript/packs/application.js
import '../components/select2';
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application' %>
<!-- bootstrap animation carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- bootstrap animation carousel -->
<!-- Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- Select2 -->
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/flashes' %>
<%= yield %>
<%= render 'shared/footer' %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<%#= javascript_pack_tag "map" %>
</body>
</html>
I expect the input should be display correctly.
If it used to work, and now it doesn't, you can git bisect to determine which commit introduced the regression. When that is done, you should be able to pinpoint the guilty piece of code, again by adding the changes in this commit one by one and see when the regression pops up. Then you might be able to understand the reason for the regression.
I came on this weird Rails issue: I added a root route to my route.rb file
root :to => 'pages#home'
however, when I enter:
http://localhost:3000
in the browser, the css styles for my home page do not show.
The odd thing is, that when I go to:
http://localhost:3000/home
the css does get rendered.
I'm using Rails 4.1.0
does anyone know what could be the problem?
ps:
my application.html.erb code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Mysite</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render "layouts/header" %>
<%= yield %>
<%= render "layouts/footer" %>
</body>
</html>
The header of my rendered page:
http://localhost:3000
looks like this:
<head>
<meta charset="utf-8">
<title>Anthony Candaele</title>
<link rel="stylesheet" href="css/style.css" />
</head>
However, when I go to:
http://localhost:3000/home
the header source of the rendered page looks like this:
<head>
<title>Mysite</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="UAWpX6x35EzVFSFyNPsaPPdE/0kEWqBQStCs9qWtOGc=" name="csrf-token" />
</head>
im trying to load onepage-scroll https://github.com/peachananr/onepage-scroll) to my rails app but it wont load it just show plain text. im new to rails as well im still learning.
here is the code for the page im trying to get to work. pages#index.html.erb
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta name="Resource-type" content="Document" />
<% stylesheet_link_tag 'onepage-scroll' %>
<% javascript_include_tag 'jquery.onepage-scroll.js' %>
</head>
<body>
<div class="main">
<section>
<h3>hello</h3>
</section>
<section>
<h3>hello</h3>
</section>
</div>
</body>
</html>
if any one can help me i will greatly appreciate. thanks
Just add =
<%= stylesheet_link_tag 'onepage-scroll' %>
<%= javascript_include_tag 'jquery.onepage-scroll.js' %>
I have implemented Omniauth and Koala7 gems to integrate my application with Facebook.
Everything works well, except one minor problem with posting custom actions with custom objects.
The problem is that my object url should be the show page of a newly created post, such as /posts/1. To make this page recognized as a facebook object, I need to put facebook metatags on top of the show.html.erb like this:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# sdff: http://ogp.me/ns/fb/sdff#">
<meta property="fb:app_id" content="myid" />
<meta property="og:type" content="sdff:post" />
<meta property="og:url" content="<%= "http://sdff.herokuapp.com" + post_path(#post) %>" />
<meta property="og:title" content="Sample" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
</head>
The problem is that facebook object debugger recognizes this as a type:webpage instead of type:post. I think this is because there's already the default head tag in /layouts/application.html.erb, like so:
<head>
<title>sdff</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
I assume this because the object debugger specifically points out:
Meta Tags In Body: You have tags ouside of your . This is either because your was malformed and they fell lower in the parse tree, or you accidentally put your Open Graph tags in the wrong place. Either way you need to fix it before the tags are usable.
So how do I solve this problem?
I need to place the facebook metatags in my show.html.erb, but the page itself is already a part of the body of the entire application layout.
Based on the error message you posted, I gather that your meta tags are not in the <head> as they should be. This is a great case to use a content_for block. In your show.html.erb view, place your desired meta tags into a content_for :head block. This saves the html and allows you to insert it somewhere else in the layout.
<% content_for :head do %>
<meta property="fb:app_id" content="myid" />
<meta property="og:type" content="sdff:post" />
<meta property="og:url" content="<%= "http://sdff.herokuapp.com" + post_path(#post) %>" />
<meta property="og:title" content="Sample" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
<% end %>
Then just add a yeild(:head) to your application template. The html you placed in the show view will be inserted into this spot in the application template. We check for nil here so that the yield is considered optional.
<head>
<title>sdff</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= content_for?(:head) ? yield(:head) : '' %>
</head>
the system-created page http://localhost:3000/pages/home shows up fine. but when i change the content of the file home.html.erb and reload the page in the browser and view the source code, i see the content from my home.html.erb file gets added under the automatically created content. so basically there are two pages in the source code. anyone knows what causes that?
my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
</head>
<body>
<%= yield %>
</body>
</html>
my home.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | Home</title>
</head>
<body>
<h1>Sample App</h1>
...
</body>
</html>
Your application.html.erb is fine, but home.html.erb is used to include only what's inside <body> tag. So, in your case it must contain only the
<h1>Sample App</h1>
...
part.