I'm very confused by how the application.html.erb file and the view files combine. I have in my application.html.erb file the following (minimized the content for brevity):
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap Css -->
<link href="/bootstrap-assets/css/bootstrap.css" rel="stylesheet">
<%= yield :head %>
</head>
<body>
<nav>
<!--Long navbar section -->
</nav>
<%= yield %>
</body>
</html>
In my view file:
<html>
<head>
<!-- View Specific Stylesheet -->
<link href="/css/ViewSpecific.css" rel="stylesheet" />
</head>
<body>
<!-- View Specific Body -->
</body>
What I would expect is that when these 2 files combine, the View specific stylesheet load in the <head> section, and the View Specific Body load in the <body> section. The final result actually sends the view specific stylesheet to the <body> section, after the navbar from application.html.erb is already loaded. This obviously produces the unwanted result that part of my body is loading before the stylsheet is loaded, and the first second the user views the page everything looks terrible.
You should make use of content_for if you want to render the view-specific head into the head section of application.html.erb. Use
<% content_for :head do %>
<!-- View specific head section -->
<link href="/css/ViewSpecific.css" rel="stylesheet" />
<% end %>
Since you yield :head in the application.html.erb, thats all to be done. And you don't need html tags in the views.
For more, see http://apidock.com/rails/v4.2.1/ActionView/Helpers/CaptureHelper/content_for
Related
I did it in application.html.erb
<html>
<head>
<%if #hasAdsense == true%>
<script data-ad-client="ca-pub-64xxxxxxxxxxx" async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<%end%>
</head>
<body>
<%= yield %>
</body>
</html>
but when I see a page with chrome developer tools ,it's automtically inserted in body not in head.
so html code of page where #hasAdsense==true looks like this.
<html>
<head>
</head>
<body>
<script data-ad-client="ca-pub-64xxxxxxxxxxx"
async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</body>
</html>
I don't know why this happens, but google bot inspect Adsense script in head tag,
so I think this can cause problem so that I can't use Adsense script in my website.
is there a way let rails not insert automatically adsense script into body tag?
do you have
<%if #hasAdsense == true%>
<script data-ad-client="ca-pub-64xxxxxxxxxxx" async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<%end%>
in any other views, because it might come from the yield.
We probs need a little more info here, is #hasAdsense a boolean value (can you confirm by showing your controller or checking on the page directly)? does this happen with other content? so if you made a if statement with <title>Hello World</title> does that render in the body as well?
What's the difference between #Html.Partial, #Html.Section and #section ? When should I use each of them?
#Html.Partial is to split the page into parts. The page will be incomplete without filling in the part.
#Html.Section is an (often optional) portion, usually defined in layouts, that inheritors can add content into. For example, if they want to add extra scripts to the page, there's a "scripts" section at the end of the default layout that allows pages to inject it at the end of the content.
#section is just defining the content for an #Html.Section in the child page.
For example:
<!-- layout page. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="container body-content">
Layout content.<br/>
#RenderBody()
</div>
#RenderSection("scripts", required: false)
</body>
</html>
...
<!-- child page -->
#section scripts{
<script src="/Scripts/jquery.signalR-2.2.1.min.js"></script>
}
<div>Child content.</div>
<div>Partial content here: #Html.Partial("~/Views/PartialContent.cshtml")</div>
...
<!-- partial content in PartialContent.cshtml -->
Hello!
The result would be something like:
Layout content.
Child content.
Partial content here: Hello!
I use partial views to render the content of the pages.
Normally, I use sections to render specific Scripts and CSS for the content by using #section
My basic url is {Controller}/{Action}/{Id}
For urls like {Controller}/{Action} ie. Product/Create, the sections and the pages render ok.
But when my url is {Controller}/{Action}/{Id} ie. Product/Edit/2, the CSS and Scripts are absent and I only get a plain HTML page.
My Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<!-- CSS FILES -->
<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- BEGIN RENDER CSS SECTION EXISTING IN PARTIAL -->
#RenderSection("Style", required: false)
<!-- END RENDER CSS SECTION EXISTING IN PARTIAL -->
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div class="header">
#Html.Partial("_Header")
</div>
<div class="container">
<div class="sidebar">
#Html.Partial("_Sidebar")
</div>
<div class="content">
#RenderBody()
</div>
</div>
<!-- JAVASCRIPT FILES -->
<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- RENDER JAVASCRIPT SECTION EXISTING IN PARTIAL -->
#RenderSection("Scripts", required: false)
<!-- RENDER JAVASCRIPT SECTION EXISTING IN PARTIAL -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
</body>
</html>
My Partial Views Structure:
#model IEnumerable<Backend.Models.Product>
#{
ViewBag.Title = "Product";
}
#section Style {
SPECIFIC CSS URLS TO THE VIEW
}
HTML CODE
#section Scripts{
SPECIFIC JAVASCRIPT URLS TO THE VIEW
}
I'm doubting the additional {Id} in the URL is what messes the code because the following:
with {Id}
When Id is passed as querystring
How can I get around this issue?
The way you included the css files is not correct!
You should Use ~/ instead of ../. Razor will convert ~ to the root path of your app.
This should work.
<link href="~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
Assuming assets folder is in your app root.
With this your link's won't be broken irrespective of what page/url you are on.
You should do the same for including js files also.
Sounds like you are missing your shared layout. If you have something like this toward the top of the edit cshtml try taking it out.
#{
Layout = null;
}
If that's not there, maybe you need to specify the layout, you can just replicate whatever is in your create cshtml, for example:
#{
Layout = "~/Views/Shared/MyLayoutPage.cshtml";
}
When I do something like:
<%= c.title %>
Rails render it like this:
"
Title
"
This behavior isn't the same if I wrap the string with a tag. Can someone please explain me why Rails acts like this?
UPDATE
Github's Repo link
This has to do with ERB instead of Rails. When the template is processed it outputs any values from output ERB tags (<%= %>) to the output buffer and simply executes any other code.
Everything else is left untouched. Whitespace before and after the ERB tags is untouched. The most that you can do is to use - in the tags to have it strip some of the whitespace.
<!-- -->
<% for i in 1..10 %>
<%= i -%>
<% end %>
<!-- -->
Will output
<!-- foo -->
1 2 3 4 5 6 7 8 9 10<!-- foo -->
Note the two spaces that still show up before each number, take out that whitespace and it will look like one long number.
Compare this with
<% for i in 1..10 %>
<%= i %>
<% end %>
Will output
<!-- -->
1
2
3
4
5
6
7
8
9
10
<!-- -->
Here's the output from your test page after select View Source from the context menu.
<!DOCTYPE html>
<html>
<head>
<title>Testapp</title>
<link href="/assets/application-1b13569e9620782f423d4cd3ce931750.css" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/application-9a717ea62eac3463d689b2ba0a4e85b4.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="/hfgtJZWzxaQ2d7txQMAt2b+21MWSTYcf6/2F7Pei1k=" name="csrf-token" />
</head>
<body>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
What's wrong with me?
<!-- -->What's wrong with me surrounded by html commet<!-- -->
</body>
</html>
You probably have some indentation in your layout file or another file that renders this view.
Your application.html.erb may look like this :
<html>
<head>...</head>
<body>
<%= yield %> <!-- Some whitespaces at the beginning of this line -->
</body>
</html>
Rails simply replaces the <%= %> tags with the value of the expression in it, nothing more.
I don't see the problem. Here's the rendered HTML:
<!DOCTYPE html>
<html>
<head>
<title>Testapp</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="cOfMPm5S/tCHCEHkeRTeQTITAiz800s+3Q4ZgNWCNlY=" name="csrf-token" />
</head>
<body>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
What's wrong with me?
</body>
</html>
The relevant layout section:
<body>
<%= yield %>
</body>
I got the same problem with you!
The solution for me is to change the file Encoding from UTF-8 to UTF-8 without BOM
I'm using sinatra, glad to share with you!
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.