I am sorry if this question is not appropriate but I am trying to render an unordered list in HAML, HTML version looks like this:
<% #movies.comments.each do |comment| %>
<ul class="comments">
<li><%= comment.text %></li>
</ul>
<% end %>
I used 3 different html->haml online converters and all render this haml.
- #movies.comments.each do |comment|
%ul.comments
%li= comment.text
However the output is this (with 3 comments in a movie):
<ul class="comments">
<li>asdasdasd</li>
</ul>
<ul class="comments">
<li>asdasdasd</li>
</ul>
<ul class="comments">
<li>asdasdasd</li>
</ul>
Why does this create 3 separate ul elements, instead of one and 3 li elements in it?
It's not about HAML. It does what it does because you create ul element inside loop. What you want to do is to put root ul node on top:
%ul.comments
- #movies.comments.each do |comment|
%li= comment.text
Related
so I have a Category model with a "has many" relationship to my Soup model.
Currently, I have my page rendering a list of Categories with the Soups within each below. The page output looks like this:
Ramen
*Soup 1
*Soup 2
Other Soups
*Soup 3
*Soup 4
I added the ability to click on the Category name to show/hide the Soups. But I'd like to have this functionality's scope limited to each Category. In other words, I'd like to have clicking "Ramen" show/hide Soup 1 and Soup 2 only. Right now, clicking any Category shows/hides all 4 Soups.
views> categories> index.html.erb
<ul id="folderList">
<% #categories.each do |category| %>
<li>
<img src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/folder-blue-128.png" alt="folder" width="10%">
<%= link_to category.name, '#', id: 'show_catcontents' %> (<%= category.soups.count%>)
<div id="catcontents">
<ul>
<%- category.soups.each do |soup| %>
<li><%= soup.name %></li>
<%- end %>
</ul>
</div>
</li>
<% end %>
</ul>
<script>
$(function() {
$('a#show_catcontents').click(function(event){
event.preventDefault();
$('div#catcontents').toggle();
});
});
</script>
Any and all help is appreciated
An easy way to do this while not changing all that much is to add an id to each of your elements to further specify them in your embedded ruby, and then hide that specific element rather than the whole catcontents <div> in your Javascript hide function.
For example:
<div id="catcontents">
<ul>
<%- category.soups.each do |soup| %>
<li id= <%= soup.name %> ><%= soup.name %></li>
<%- end %>
</ul>
</div>
And then of course just change your Javascript hide function to hide by the <li> id rather than the catcontents <div>.
I am listing previously used shipping addresses for user to select. I`m dynamically adding classes
<div class="row">
<% #shipping_addresses.each do |address| %>
<ul class=<%= "shipping_address_#{address.id}" %> >
<li><%= address['name'] %> </li>
<li><%= address['street'] %> </li>
<li><%= address['city'] %></li>
<li><%= address['country'] %></li>
<li><%= address['zip'] %></li>
<li><%= address['phone'] %> </li>
</ul>
<% end %>
</div> <!-- row -->
Problem is, that now I am trying to add a col-lg-3 bootstrap class to my ul`s, and it doesn`t work when I write it like this:
<ul class=<%= "shipping_address_#{address.id} col-lg-3" %> >
I get this output:
<ul class="shipping_address_38" col-lg-3="">
I also tried several different options and they don`t work.
Can anyone help?
Thank you
The actual html you are outputting is
<ul class=shipping_address_38 col-lg-3>
And your browser is interpreting this as best it can. The quotation marks in your template never make it to the actual html because they're not actually part of the string.
You could do something like
<ul class="<%= "shipping_address_#{address.id} col-lg-3" %>" >
Although in my opinion you're now past the point where ERB gets difficult to read - you may wish to refactor this into a helper.
Here's what I want to do: I have a collection of items that I want to render in groups of 4.
<ul class="items row-fluid">
<% #items.each do |item| %>
<li class="well span3">
<div>
<h4 class="ellipsis toggle-ellipsis"> <%= link_to item.name,"#" %> </h4>
</div>
</li>
<%end%>
</ul>
What I want to do is: to render 4 items in a ul, and then render the next 4 in another ul. I know how to do this manually (Introduce a </ul><ul class=items> everytime a counter%4=0). I was just wondering if there is a helper for this sort of thing.
Yeah, there is, and you're probably going to kick yourself - http://apidock.com/rails/Array/in_groups_of
Check this:
#items.each_with_index do |item, index|
puts "current_index: #{index}
end
Index var is the counter.
So when index %4....
I have a two-way many to many relationship between work and category models. When I pluck the categoies to show on my work#index
HTML:
<% #works.each do |work| %>
<article class="work-item" data-project="<%= work.id %>">
<header class="w-article-title ">
<%=raw work.svg %>
<h1 class="article-name"><%= work.name %></h1>
<ul class="categories-total n-visible">
<li><%= work.categories.pluck(:name) %></li>
</ul>
</header>
</a>
</article>
<% end %>
It ends up returning an array of strings like:
["Visual Design", "Strategy + UX", "UxD"]
How can I make the layout display:
indiviual list items?
Remove the brackets
trim the "" off the string
<ul class="categories-total n-visible">
<% work.categories.pluck(:name).each do |n| %>
<li><%= n %></li>
<% end %>
</ul>
A first look I thought erb accepts any Ruby code, but I've got this strange behaviour...
I have an array [of tags for my article], and I want to make a nice display for them. So I'm writing something like this:
<ul>
<% #post.tags.each do |item| %>
<li>item</li>
<% end %>
</ul>
The wrong output looks like this:
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
...
</ul>
Where I am wrong? Any suggestions how to make a proper iteration?
You forgot the <%= %> to display the value of item:
<ul>
<% #post.tags.each do |item| %>
<li><%= item %></li>
<% end %>
</ul>