Ruby on Rails 3 Tutorial by Michael Hartl - Lesson 3 Static Pages Problem - ruby-on-rails

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.

Related

Javascript not working when using Tailwind Elements with Ruby on Rails

I just started a new rails 7 project with TailwindCSS using the new rails new my-app --css tailwind syntax. Tailwind CSS is working properly. I wanted to add a navbar from tailwind elements, and I followed the steps from https://tailwind-elements.com/quick-start/. The css in the navbar works, but the opening and closing of submenus (which I presume is all run by javascript) does not.
When digging into the details, I am seeing these lines in the rails s logs
Started GET "/TW-ELEMENTS-PATH/dist/js/index.min.js" for 127.0.0.1 at 2023-02-02 09:13:48 -0600
ActionController::RoutingError (No route matches [GET] "/TW-ELEMENTS-PATH/dist/js/index.min.js"):
I did the npm install tw-elements install and the tailwind.config.cs edits, what am I missing? Is there some conflict that with Ruby on Rails that I am not aware of? Do I really need to create a route, or is that a sign that something is not installed correctly?
Here is the application.html.erb where I am inserting my <script> line
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind" , "inter-font" , "data-turbo-track" : "reload" %>
<%= stylesheet_link_tag "application" , "data-turbo-track" : "reload" %>
<%= javascript_importmap_tags %>
<!--here is the line I added -->
<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>
</head>
<body>
<%= render 'layouts/navigation' %>
<main class="container mx-auto mt-28 px-5 flex">
<%= yield %>
</main>
</body>
</html>
I did try the alternate step 4 by putting import 'tw-elements'; in app/javascript/controllers.index.js but nothing is working.

Ember-cli-rails and Foundation Js modules

I am using ember-cli-rails gem. I installed ember-cli-foundation-sass as an addon for ember. Everything works fine but Foundation Js module. I made a layout just for Ember like this:
<!doctype html>
<html dir="ltr" lang="<%= I18n.locale %>">
<head>
<meta charset="UTF-8">
<title>Ember</title>
<%= stylesheet_link_tag 'frontend/frontend' %>
<%= include_ember_script_tags :frontend %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I tried different settings, but none of them worked. Any help would be appreciated.
I solved the problem. I just forgot to put what it supposed to be put in Brocfile.js

About some tags in rails program

i have got this program in ruby editor.My output comes out to be
<html>
<head><title> Ruby on Rails tutorial Sample App | <%= #title %></title>
<%= csrf_meta_tag %>
</head>
<body>
<%= yield %>
</body>
</html>
what is the error here and what is yield and csrf_meta_tag?
You don't seem to be using a server to render the views, it seems like you are rather loading the html directly on your browser.
Maybe the following link will help you get started:
http://guides.rubyonrails.org/getting_started.html
you need to rename your file from:
application.html to be application.html.erb so that it is going to interpret your embedded ruby commands.
Ref yield & content_for
Within the context of a layout, yield identifies a section where content from the view should be inserted. The simplest way to use this is to have a single yield, into which the entire contents of the view currently being rendered is inserted:
<html>
<head>
</head>
<body>
<%= yield %>
</body>
</html>
You can also create a layout with multiple yielding regions:
<html>
<head>
<%= yield :head %>
</head>
<body>
<%= yield %>
</body>
</html>
The main body of the view will always render into the unnamed yield. To render content into a named yield, you use the content_for method.

Managing page-specific stylesheets and javascript files with Rails 3 application layout

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>

stylesheet_link_tag not producing links

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.

Resources