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.
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'm using rails with Bootstrap. I have a basic page with navbar along the top. What I am struggling to achieve is how to define the targets for the options in the navbar as partials beneath this navbar.
I've trawled threads on here - finding things that don't quite marry up to the above, and followed the following tutorial: http://ruby.railstutorial.org/chapters/filling-in-the-layout#sec-partials ... which didn't work. No matter what I try, I end up with a link that simply directs to a whole new page.
My code as it stands (based on the above quoted tutorial)....
snippet from post_login.html.erb
<ul class="nav navbar-nav">
<li class="active"><%= link_to "P4 Sync", "p4syncpartial" %></li>
<li><%= link_to "P4 Output", "p4outpartial" %></li>
</ul>
<<<SNIP!!!>>>
<div class="container">
<%= yield %>
</div>
</body>
routes.rb entry for one of the above tags:
match '/p4syncpartial', to: 'authentication#_perforce', via: 'get'
And just for completeness, my placeholder authentication/_perforce.erb:
<p>This is a dummy P4 partial</p>
Can anyone point out where I am going wrong? Thank you :)
You're missing leading slash / in link_to url parameter:
<ul class="nav navbar-nav">
<li class="active"><%= link_to "P4 Sync", "/p4syncpartial" %></li>
<li><%= link_to "P4 Output", "/p4outpartial" %></li>
</ul>
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>
I followed the basic railscast for using Twitter Bootstrap in Rails application. Everything was great, until I had to push to heroku, then I had some problems with pg gem, and I had to rake assets:precompile to push it ok. Finally I solved.
Now, I'm trying to use pills in my application, I have copy/paste from documentation and changed the url in href :)
<div class="container">
<div class="row">
<div class="span3">
<p> Lorem Ipsum</p>
</div>
<div class="span9">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Products</li>
<li>Categories</li>
</ul>
</div>
</div>
</div>
When I push one of the links, I'm redirected to the right url but the selected option doesn't change to class="active". I don't know why... I thought it was the javascript but hover property works ok... I mean, when the mouse is over an option (diferent from active) its style changes ok.
I tried rake assets:clean, but no change is made
Thanks
You actually have to handle this by yourself!
Your list should look something like
<li class="<%= 'active' if params[:controller] == 'yourdefaultcontroller' %>">Home</li>
<li class="<%= 'active' if params[:controller] == 'products' %>">Products</li>
<li class="<%= 'active' if params[:controller] == 'categories' %>">Categories</li>
You need to specify in each request which tab is the active one. You can do this by relying on the name of the controller (and action if need be) that is passed in the params hash.
You can use something like this:
<li class="<%= 'active' if current_page?(root_path) %>"><%= link_to "Home", root_path %></li>
<li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li>
<li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to "Contact", contact_path %></li>
I used a helper to implement this in the style of Rails' form helpers.
In a helper (e.g. app/helpers/ApplicationHelper.rb):
def nav_bar
content_tag(:ul, class: "nav navbar-nav") do
yield
end
end
def nav_link(text, path)
options = current_page?(path) ? { class: "active" } : {}
content_tag(:li, options) do
link_to text, path
end
end
Then, in a view (e.g. app/views/layouts/application.html.erb):
<%= nav_bar do %>
<%= nav_link 'Home', root_path %>
<%= nav_link 'Posts', posts_path %>
<%= nav_link 'Users', users_path %>
<% end %>
This example produces (when on the 'users' page):
<ul class="nav navbar-nav">
<li>Home</li>
<li>Posts</li>
<li class="active">Users</li>
</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>