I'm working through the Ruby on Rails Tutorial at http://railstutorial.org/, chapter 4, listing 4.4. I've inserted the two lines that have calls to stylesheet_link_tag, but the links aren't being inserted into the final page. Here's my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<% stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<% stylesheet_link_tag 'blueprint/print', :media => 'print' %>
</head>
<body>
<%= yield %>
</body>
</html>
Here's the output of http://localhost:3000/pages/home
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | Home</title>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="D8xx1zqWM5qqwqdabyjy5eHLPvLY/Sxe5vEFJ816fMY="/>
</head>
<body>
<h1>Sample App</h1>
<p>
This is the home page for the
Ruby on Rails Tutorial
sample application
</p>
</body>
</html>
I've copied and pasted and typed on my own, and I'm getting the same results. Suggestions?
Thanks,
Chuck
This is producing output so it needs to be in an erb block that outputs into the template:
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
the type of block you are using:
<% stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
does not have its result printed into the template.
Related
After adding the viewport meta tag, my app still is not mobile responsive. I am using bootstrap as well. Is there any fix?
application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>gustoHop</title>
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%#= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
<!-- <style>
#import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght#400;600;700&display=swap');
</style> -->
<%= favicon_link_tag asset_path('gustoHop-favicon.png') %>
</head>
<body>
<%= render "shared/navbar" %>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
<%= render "shared/footer" %>
<%= javascript_pack_tag 'application' %>
</body>
</html>
I am using the prism gem and it highlights great but only from a direct URL or after refreshing the page. It does not highlight if navigating from the home page.
Any suggestions? Thanks!
<!DOCTYPE html>
<html>
<head>
<link href="themes/prism.css" rel="stylesheet" />
<script src="prism.js"></script>
<title><%= yield(:page_title) %></title>
<%= csrf_meta_tags %>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render "layouts/navbar" %>
<div class="container <%= controller_name %> <%= action_name %>">
<%= yield %>
</div>
</body>
</html>
I'm using Rails 5.1.4, I'm new on the platform and I have problems with turboblinks, I have a file containing jquery code that has to run once the page loads, but Whenever the page loads the file runs several times but when I disable the turboblinks there it works as I want it. So I would like to know if there is one less to fix it without turning off the turboblinks. Thank you in advance..
So there is my layout file.// app/views/layouts/application.html.erb
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Rails web app</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-
track' => true %>
<%= csrf_meta_tags %>
</head>
<body class="<%= controller_name %> <%= action_name %>">
<%= render 'layouts/header' %>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<div class="container">
<%= yield %>
</div>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true
%>
</body>
</html>
About my js file as you will see i try to load automatically a bootstrap modal with an animation when the page loaded, actually the problem happens when i clik to any link on this page which takes me to another page and i try to come back to the initial page where the js file is loaded, then the problem happens. i see the page refresh many times and the js file as well.
So there is my js file with jquery code. //app/assets/javascripts/file.js
$(document).ready(function(){
$('#myModal').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog animated rollOut');
});
$('#myModal').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn
animated');
});
$('#myModal').modal('toggle');
});
Turbolinks replaces the body so put this line in your head tag :
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
Like this :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Rails web app</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= csrf_meta_tags %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</head>
<body class="<%= controller_name %> <%= action_name %>">
<%= render 'layouts/header' %>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<div class="container">
<%= yield %>
</div>
</body>
</html>
or add data-turbolinks-eval=false to the script tag that includes turbolinks.
Also you need use the turbolinks:load event :
$(document).on('turbolinks:load', function() {
$('#myModal').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog animated rollOut');
});
$('#myModal').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn
animated');
});
$('#myModal').modal('toggle');
});
How write this ERB code in HAML:
<head>
<meta charset="utf-8">
<title><%= title %></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<%== meta_data_tags %>
<%= favicon_link_tag image_path('favicon.ico') %>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<%= stylesheet_link_tag 'store/all', :media => 'screen' %>
<%= csrf_meta_tags %>
<%= javascript_include_tag 'store/all' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<%= render "spree/shared/routes" %>
<%= yield :head %>
</head>
particularly interested in this
<%== meta_data_tags %>
code snippet.
I found answer for my question:
= raw(meta_data_tags)
<%== %> is the same as <%= raw() %>. It's just a fast helper to achieve same result.
Thank you all for help. =)
In Erubis (whch Rails uses) the <%== ... %> syntax escapes the result of the expression. Haml has a similar feature using &=.
So a Haml version of <%== meta_data_tags %> might look something like:
&= meta_data_tags
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.