What happens with Rails indentation in outputted HTML? - html

I'm writing code for a Rails view in TextMate (using the 2-space indentation standard). Whenever I view the output of my webpages (View Source), the HTML brackets always seem weirdly indented. For example, my application.html.erb looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Rainleader</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :all %>
<%= csrf_meta_tag %>
</head>
<body>
<div id="outer">
<div class="contentwidth main">
<%= render 'layouts/header' %>
</div>
<%= yield %>
</body>
</html>
And the partial it's rendering (_header.html.erb) looks like this:
<div class="logo">
<h1>minimal.</h1>
</div><!-- end logo -->
But, an excerpt of the outputted HTML has misplaced (mis-indented) brackets (see my notes in the code below):
<body>
<div id="outer">
<div class="contentwidth main">
<div class="logo"> <<<Why is this so far to the right?
<h1>minimal.</h1> <<<Why is this so far to the left?
</div><!-- end logo -->
What's going on here? If my call to the _header.html.erb partial in application.html.erb is indented four spaces, do I need to indent the code in the partial by at least that same amount to have it nest properly?

The first line of the partial that is rendered is indented as <%= render 'layouts/header' %> in application.html.erb. But all other lines of code are not indented further, just left-aligned as they are in your partial. It bugged me too, which is part of why I started using haml.

Related

failing to render application.html.erb

I am failing to render my application.html.erb template i am getting the following error
ActionView::SyntaxErrorInTemplate in ApplicationController#home
app/views/layouts/application.HTML.erb:10: syntax error, unexpected ':', expecting ')'
app/views/layouts/application.HTML.erb:11: syntax error, unexpected ':', expecting ')'
This is what the code looks like this application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Appz</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application" , "data-turbo-track" : "reload" %>
<%= javascript_include_tag "application" , "data-turbo-track" : "reload" , defer: true %>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>
<%= yield %>
</body>
</html>
my code looks ok I have tried everything what could be the problem
You need to remove white space before :. Change the line and below line like this:
<%= stylesheet_link_tag "application" , "data-turbo-track": "reload" %>
Yes removing the white space works apparently I had a formatting extension enabled in vs code and it was messing up my code it was auto indenting unnecessarily and messing up the code I only became aware when I tried to correct the code by removing the white space and each time I saved it auto indented until I disabled the extension and it stopped I have since uninstalled the extension.
So be careful what kind of extensions you install in your code editor you will get new and unfounded errors no one has seen before.

ASP classic .NET How do I inherit a layout [duplicate]

Is it possible to build some kind of master page with Classic ASP without frames or iframes?
I’m wondering if there is a way to include content pages in the main page like ASP.NET master pages do. From what I have researched, ASP Classic does support inclusion of other ASP/HTML pages into a page, but the value put into this include means the function cannot be dynamic.
You could just create functions (say, a Header() function and a Footer() function) which do nothing but output some set of markup. Those functions can take parameters too, and be called conditionally. It's not quite the same as a Master page, but it sounds like it accomplishes what you are trying to do. You would have an <!--#include file="headerfooter.asp"--> on each page, and each page would call Header() & Footer().
Or you can just use <!--#include file="header.asp"--> at the top and <!--#include file="footer.asp"--> at the bottom of each page too. I've seen both approaches.
If you are looking for the reverse, that is, a single template page which calls individual pages in it's "middle" section, then that's not really something you can do easily with ASP classic. It's a fundamental difference in approach: ASP.NET has a concept of a control tree, events, etc, while ASP Classic is essentially just a script that runs top to bottom.
This idea is from Classic ASP Master Pages | Godless Code. I’ve transcribed the code in images on that page, extended its example a bit, and also explored the limitations of this technique.
The idea is that each page has only one Server-Side Include (one <!--#include file="" --> call). The single inclusion is a master template file, which you could name master.asp. The master page calls custom subroutines on each page in place of each content area. Each child page defines those subroutines with Sub, with content unique to that child page.
master.asp
<!DOCTYPE html>
<html>
<head>
<title><% Title() %></title>
</head>
<body>
<% BodyContent() %>
</body>
</html>
aboutUs.asp
<!--#include file="master.asp" -->
<% Sub Title %> About Us <% End Sub %>
<% Sub BodyContent %>
<h1>About Us</h1>
<p>
We do things!
</p>
<% End Sub %>
That turns into this HTML when you visit aboutUs.asp on an IIS server:
<!DOCTYPE html>
<html>
<head>
<title> About Us </title>
</head>
<body>
<h1>About Us</h1>
<p>
We do things!
</p>
</body>
</html>
However, this approach does not allow nesting:
subtemplate.asp
<div class="innerLogo <% LogoSide() %>">
<% LogoImg() %>
</div>
template_user.asp
<!--#include file="master.asp" -->
<% Sub Title %> Our Logo <% End Sub %>
<% Sub BodyContent %>
<!--#include file="subtemplate.asp" -->
<% Sub LogoSide %> leftside <% End Sub %>
<% Sub LogoImg %>
<img src="img/about.png" alt="About" />
<% End Sub %>
<% End Sub %>
This will not work, because nested Subs are a syntax error:
Microsoft VBScript compilation error '800a03ea'
Syntax error
/template_user.asp, line 9
Sub LogoSide
^
Since nesting is not allowed, this templating system is, in effect, a one-time solution. If your individual pages’ subroutines become too unwieldy, you can’t use this technique again. So when using this technique, you should carefully choose where to carve out your set of templates in order to provide the best balance between flexibility and DRYness.
Rory wrote a great example for master pages in Classic ASP, but demonstrated that the "master page" approach had its limitations because Subs cannot be nested.
However, for the sake of demonstration, and because JavaScript in Classic ASP has hardly any documentation anywhere on the Internet, here's the same example that fails in ASP VBScript but won't fail in ASP JavaScript.
master.asp
<!DOCTYPE html>
<html>
<head>
<title><% Title() %></title>
</head>
<body>
<% BodyContent() %>
</body>
</html>
subtemplate.asp
<div class="innerLogo <% LogoSide() %>">
<% LogoImg() %>
</div>
template_user.asp
<%# Language= "Javascript" %>
<!--#include file="master.asp" -->
<% function Title() { %> About Us <% } %>
<% function BodyContent() { %>
<!--#include file="subtemplate.asp" -->
<% function LogoSide() { %> leftside <% } %>
<% function LogoImg() { %>
<img src="img/about.png" alt="About" />
<% } %>
<% } %>
It works! here are the juicy results:
<!DOCTYPE html>
<html>
<head>
<title> About Us </title>
</head>
<body>
<div class="innerLogo leftside ">
<img src="img/about.png" alt="About" />
</div>
</body>
</html>
Remember, JavaScript, even the ECMAScript 3 version in Classic ASP, is often way more powerful and expressive than the VBScript engine that was favoured and heavily promoted by Microsoft. If you ever have to use Classic ASP, use JavaScript!
One of the ugliest problems in classic ASP is that #includes always happen, so putting two includes in an if-then-else construct always includes both – even though you only see the output that applies to your conditional value.
Even when includes work, they don't give you the result you're really looking for, which is to select a template or skin “on the fly”.
One way to handle this situation is to use a template engine such as KudzuASP that surpasses the traditional #include methodology. Here is a very simple example:
<!-- An HTML Template -->
<html>
<head><title><!--[Replace|PageTitle]-->PageTitle<!--[/Replace]--></title></head>
<body>
<table border="1" cellpadding="4" callspacing="2" width="640">
<tr>
<td colspan="2"><!--[HeaderContent/]--></td>
</tr>
<tr>
<td width="160"><!--[LeftColumnContent/]--></td>
<td><!--[MainContent/]--></td>
</tr>
<tr>
<td colspan="2"><!--[FooterContent/]--></td>
</tr>
</table>
</body>
</html>
And the ASP code looks like this:
<%# Language=VBScript %>
<!-- #include file="./KudzuASP/_kudzu.asp" -->
<%
Dim PageTitle : PageTitle = "This is a Master Page"
'
' Create the template engine
'
Dim T_ENGINE
Set T_ENGINE = New CTemplateEngine
T_ENGINE.PutValue "PageTemplate", PageTemplate
T_ENGINE.SetHandler "HeaderContent", New CTXHeaderContent
T_ENGINE.SetHandler "LeftColumnContent", New CTXLeftColumnContent
T_ENGINE.SetHandler "MainContent", New CTXMainContent
T_ENGINE.SetHandler "FooterContent", New CTXFooterContent
'
' Custom Tage Handlers
'
Class CTXHeaderContent
Public Sub HandleTag(vNode)
vNode.Engine.ContentAppend "Header"
End Sub
End Class
Class CTXLeftColumnContent
Public Sub HandleTag(vNode)
vNode.Engine.ContentAppend "Left<br/>Content"
End Sub
End Class
Class CTXMainContent
Public Sub HandleTag(vNode)
vNode.Engine.ContentAppend "Main<br/>Content"
End Sub
End Class
Class CTXFooterContent
Public Sub HandleTag(vNode)
vNode.Engine.ContentAppend "Footer"
End Sub
End Class
'
' Evaluate the template
'
T_ENGINE.ParseFile Server.MapPath("./MasterPage.html")
T_ENGINE.EvalTemplate
%>
The template engine makes calls to your custom objects defined in the hosting ASP code page when the appropriate tags are processed. The function members of your custom classes have direct access to the hosting page and its variables and methods, as well as the template engine’s object hierarchy. In other words, the template is driving the output and the hosting ASP page during output.
This beats the include mechanism hands down, because the template engine can dynamically select which HTML template to process at runtime, and it can dynamically include libraries of custom tag handlers using the built in <!--[import/]--> tag.
UPDATE 2016.01.13: I have open sourced this project and you can find the latest code maintained at this address: https://github.com/Mumpitz/KudzuASP
I just use a Default.asp page with html, then put my code in the content area.
<%# Language="VBScript" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="topNav"> <!--begin top Nav-->
<ul>
<!--Be sure that all links are like this href="?page=contentPageEx"-->
<li>Home</li>
</ul>
</div> <!--end top Nav-->
<div id="content">
<%
Dim default
default= Request.QueryString
If default= "" Then
Server.execute "includes/home.html"
Else
Server.execute "includes/" & request("page") & ".html"
end if
%>
</div>
<div id="botNav"> <!--begin bot Nav-->
<ul>
<li>Home</li>
</ul>
</div> <!--end Bot Nav-->
</body>
</html>
Then I put all my content into an includes file with html pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--Search engines use this title ect...-->
<title>Hello SEO! This is a content page!</title>
<!--Can be styled independently-->
<style>
p {
color: #0094ff;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Rails rendering navbar inside body tag

I'm rendering a navbar in application.html.erb like this:
<!DOCTYPE html>
<html>
<%= render "shared/head" %>
<%= render "shared/navbar" %>
<body>
<%= render 'layouts/alerts' %>
<%= yield %>
</body>
</html>
However, in my browsers inspector I see the navbar being rendered inside the body tag.
Anybody know why this is happening?
You can actually omit tags like <html>, <head> or <body>, see this answer here: https://stackoverflow.com/a/15094615/9595653
Since you're not rendering your navbar inside the header (why would you), the browser sees your navbar as the beginning of the body tag and renders it as such.

Is Rails going "backwards" in the code in this example?

I have following html page home.html.erb:
<% provide(:title, 'Home') %>
<h1>Sample App</h1>
<p>
This is the home page for the
Ruby on Rails Tutorial
sample application.
</p>
And I have the following layout application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
...
</head>
<body>
<%= yield %>
</body>
</html>
full_title() is a function that checks if there was a title passed as a parameter. If there was, it will place it into the HTML. If no parameter is given, it will place a base title into the HTML.
I'm assuming rails begins by going through the application.html.erb and then upon reaching <%= yield %>, it will embed the contents of home.html.erb into application.html.erb at that location, resulting in the following document:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
...
</head>
<body>
<% provide(:title, 'Home') %>
<h1>Sample App</h1>
<p>
This is the home page for the
Ruby on Rails Tutorial
sample application.
</p>
</body>
</html>
In the 4th line <%= full_title(yield(:title)) %>, the value "Home" is definitely being passed for :title, but the code <% provide(:title, 'Home') %> doesn't come until several lines later. Is Rails going backwards to accomplish this? How is this happening?
No it's don't. This is kind of string interpolation, this value will be replaced after every call of provide(:title, ...)
My understanding is that the home.html.erb is processed before the application layout. In other words, the view and helper are prepared and 'plugged-in' to the application layout before the whole thing is complete. I guess "going backwards" depends on which way you look at it / how it actually works. I'm still learning too, but it's not necessarily a 'top to bottom' sequence in terms of how the code is layed out on the page.

Wanting same banner/nav menu on each page in Rails

I'm new to rails. I currently have 3 pages in my web app. I am wondering what is the "cool rails way" where I can easily implement the same banner (pic/website logo/text) and horizontal navigation menu on each page with out having to copy and paste the code or create separate CSS files for each page. Is this possible? Would like to stick with Ruby/Rails/CSS/HTML.
Also, It seems that if I create a css element titled banner for one view of one controller another view of a different controller has the same styling. Is there something going on behind the scenes here?
Thanks.
This is usually accomplished through application.html.erb. You put the header of your web site in that page followed by a <%= yield %> statement and then the footer. The yield statement inserts the content from whatever action is being processed.
For example:
application.html.erb
<html>
<head>
</head>
<body>
<h1>My cool web site header and menu!</h1>
<%=yield %>
<p>Web site footer</p>
index.html.erb
<h2>Index</h2>
<ul>
<% #stuff.each do |thing| %>
<li><%=thing.name%></li>
<% end %>
</ul>
The contents of index.html.erb will be inserted into the application.html.erb at the spot where <%=yield %> appears.
Following this tutorial: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book ,
the way to do it is to use rendermethod.
example code from the tutorial:
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" =>
true %>
<%= javascript_include_tag "application", "data-turbolinks-track" =>
true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= render 'layouts/flash' %>
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
According to the tutorial, the way in rails to pack up a logical unit in one place is to use a facility called partials.
For example, you can pack up your navigation bar in app/views/layouts/_navbar.html.erb
then it can be rendered in the layout with <%= render 'layouts/navbar' %>
More about the parials: http://ruby.railstutorial.org/chapters/filling-in-the-layout#sec-partials
Rails defaults to concatenating all CSS files into one master. http://guides.rubyonrails.org/asset_pipeline.html