I have a haml file with the following:
#test-zone
%p.test-class
%p
= "The test works!"
I am expecting the following output:
<div id='test-zone'>
<p class='test-class'>
<p>The test works!</p>
</p>
</div>
BUT what I'm seeing is this:
<div id='test-zone'>
<p class='test-class'></p>
<p>The test works!</p>
<p></p>
</div>
I'm very confused why the tags are closing themselves. I also don't know what's up with that extra tag. I do not have too much experience with haml and I have not been able to search out a solution to this problem. Any other information you need from me I am happy to provide.
Haml itself is producing the output you are expecting:
<div id='test-zone'>
<p class='test-class'>
<p>
The test works!
</p>
</p>
</div>
However this is invalid HTML, a <p> is not allowed inside another <p>. You are probably looking at the inspector window of your browser which shows the “corrected” markup. If you view the source directly you will see the expected (invalid) code.
The fix is simply to make sure you use valid HTML, perhaps make the test-class paragraph a div instead.
Related
<p th:with="firstName1='James1'">
<p>Upper</p><p th:text="${firstName1}"></p>
</p>
<p th:with="df='today'">
Today is: <span th:text="${df}">13 February 2011</span>
Could you tell me what is the difference between the two code sections. They seem identical for me. But there is some difference as the results differ.
Alright, I've never encountered this before... but it looks like Thymeleaf is enforcing the rule that Any <p> (or other block-level element) will implicitly close any open <p>. This works, for example:
<div th:with="firstName1='James1'">
<p>Upper</p>
<p th:text="${firstName1}"></p>
</div>
<p th:with="df='today'">
Today is: <span th:text="${df}">13 February 2011</span>
</p>
In your example, the firstName1 variable is out of scope because the parser is treating your HTML like this (so firstName1 is considered null):
<p th:with="firstName1='James1'"></p>
<p>Upper</p>
<p th:text="${firstName1}"></p>
I have these lines in a view:
<%
if current_user.is_fav?(a)
cls = "product fav"
else
cls = "product"
end
%>
and later
<div class=<%= cls %> >
This produces:
<div class="product" fav>
EDIT: as the answer says, it did NOT produce this, it was the browser "inspect" that showed it to me.
I can work my around it, but why doesn't the above code work?
This produces:
<div class="product" fav>
No, it doesn't. It produces <div class=product fav>. What you see (via something like "inspect element", correct?) is browser trying to interpret your broken markup as close to html spec as it can.
As noted in other answers, what you should do instead is something like this:
<div class="<%= cls %>">
<div class=<%= cls %> >
should probably be
<div class="<%= cls %>">
You're substituting a string into an erb placeholder, but the underlying template does not indicate that the placeholder itself is a string. ERB is likely making a best effort attempt to do a correction but it's oviously not able to cope. Edit: Sergio pointed out this is likely the browser doing this, not ERB.
Ive been trying to work out how to prepend a comment once its been created via Ajax, I added remote true to the form. Inserted the block in the controller but then it got the js file where i prepended the new comment. I couldn't figure it out. I came across this code on SO and quickly gave it a shot and it worked. But i cant work out why/how?
This is the code: JS file,
$("<%= escape_javascript(render #message) %>").prependTo(".view-messages");
Here is the div to which it is prepended
<div class="view-messages">
<%= nested_messages #messages.arrange(:order => :created_at) %>
</div>
Its this line here $("<%= escape_javascript(render #message) %>") Ive tried debugging it but cant,
What is that printing out, is it one of these rails magic things or am i being stupid?
Although it works i like to know why and how so if anyone can help me out me id be grateful.
Thanks
EDIT:
$("<div class=\"body body-144\">\n <span class=\"tip tip-left\"><\/span>\n <div class=\"message font-medium\">\n ellll <br />\n <\/div>\n <div class=\"flerowspb\">\n <span class=\"font-small\">\n <a href=\"/profiles/122\">Nyall2911(28)<\/a>\n <\/span>\n <span class=\"font-small\">\n <a href=\"/messages/new?entry_id=344&parent_id=144\">Reply<\/a>\n <a rel=\"nofollow\" data-method=\"delete\" href=\"/messages/144\">| Delete<\/a>\n <\/span>\n <\/div>\n<\/div>\n")
This is what its rendering, So i suppose my question is, how is rails getting all of the HTML from my comment partial by just calling (render #message)
Here's the escape_javascript method: https://github.com/rails/rails/blob/55f9b8129a50206513264824abb44088230793c2/actionview/lib/action_view/helpers/javascript_helper.rb#L25
Per the comment below the method, it looks like it replaces a few unsafe characters and returns raw HTML using the html_safe method. jQuery then prepends that raw HTML to your div.
playing around with rails and got a little problem with the layout.
I have a simple home mvc.
Content of the home view is just
<h3>Home</h3>
<p>content</p>
I have my application view for overall design with some partials and so on.
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3>Head goes here</h3>
</header>
<%= yield %>
</section>
Now I come to my main Part for displaying the different pages with yield.
How should i split up the template? Should I put the complete application part to the home view to display the Heading in the right place? Or is there a possibilty to get the Heading different from the yield?
Any Suggestions?
P.S.: If someone have a nice tutorial or website for explaining How to structure and plan the views. A comment below would be nice.
best regards
dennym
I think that you are asking about using named yields.
From your structure, we add a yield named header
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3><%= yield :header %></h3>
</header>
<%= yield %>
</section>
And then we set the content for that named yield:
<% content_for :header do %>
My header
<% end %>
<p> Rest of page ...</p>
If you are just trying to change you header periodically I would suggest either you have different layouts that have different headers which you could specify in your controller by
layout :layout_name, or dynamically change header content using js.
So I have an input element like this. The wrapping element is about, you know, a visual thing.
<div class="input-wrap">
<input class="blah-blah" />
</div>
When the <input> contains the error, it'll be like this:
<div class="input-wrap">
<div class="field-with-errors">
<input class="blah-blah" />
</div>
</div>
But what I want to do is:
<div class="input-wrap field-with-errors">
<input class="blah-blah" />
</div>
I found this page, it's very close to my question
Rails 3: "field-with-errors" wrapper changes the page appearance. How to avoid this?
Now I know I can throw
config.action_view.field_error_proc = Proc.new { |html_tag, instance|
"#{html_tag}".html_safe
}
to avoid making a wrapping tag around the <input> tag that has an error on. But what I really wanna do is, again, adding "field-with-errors" class on the direct parent of the <input> tag. Can I do that? Does ActionView hold the tree structure of DOM Nodes?
You can put the code for handling errors wherever you like, just call it as a block on the instance variable, for example
if #instance.errors.any?
<div class="field with errors">
#instance.errors.full_messages.each do |msg|
<p><%= msg %></p>
end
end
If you user this a lot, it's good to pull it out into a helper and pass in the instance variable as a parameter.