I am working on a project and currently working on one of the views which is a page of different categories. Everything is rendering correctly however it's also putting the db info in the page.
Here is the code of my view
<div class="categories">
<div class="container blurbs">
<div class="cards row">
<%= #categories.each do |c| %>
<div class="card col-xs-4" %>
<%= image_tag c.image, :class => "cat" %>
<h4 class="title"><%= c.title %></h4>
</div>
<% end %>
</div>
</div>
</div>
Here is a link to a
screenshot of rendered page
Yes, fix is:
<div class="categories">
<div class="container blurbs">
<div class="cards row">
<% #categories.each do |c| %>
<div class="card col-xs-4" %>
<%= image_tag c.image, :class => "cat" %>
<h4 class="title"><%= c.title %></h4>
</div>
<% end %>
</div>
</div>
</div>
Look I removed = from this <%=.. In the below line :
<% #categories.each do |c| %>
#each method returns the collection after it completed its iterations. And due to this <%=, the return value of each which is #categories printed back. But if you use <%.. only, all above things will happen, but it wouldn't print back the object #categories.
when you use the tags <%= ... %> whatever is within the tags gets displayed on the page. In your current view you have
<%= #categories.each do |c| %>
<div class="card col-xs-4" %>
<%= image_tag c.image, :class => "cat" %>
<h4 class="title"><%= c.title %></h4>
</div>
<% end %>
Which displays the entirety of whatever the loop returns which is where you're getting the display. Change the tags to be <% #categories.each do |c| %> and you'll be good to go.
Related
I am trying to display the last instanced record from my model Tribune with this layout :
Some random tribune
Some random tribune
Last
Last recorded tribune
I am using the gem will_paginate which allow me to display 10 tribunes / per page.
The issue is that the layout is working but applied to each page.
Every 10 tribunes, one is identified as "last". Obviously, I would like to have only one tribune identified as last.
Here is my code :
<div class="wrapping">
<% #tribunes.each do |tribune| %>
<div class="container">
<div class="mouse-out-container"></div>
<div class="row">
<% if tribune == #tribunes.last
%>
<h1>Last</h1>
<div class="col-xs-12 col-md-12">
<div class="card">
<div class="card-category">Popular</div>
<div class="card-description">
<h2><%= tribune.title %></h2>
<p><%= tribune.content.split[0...25].join(' ') %>...</p>
</div>
<img class="card-user" src="https://kitt.lewagon.com/placeholder/users/tgenaitay">
<%= link_to "", tribune, :class => "card-link" %>
</div>
<% else %>
<div class="col-xs-12 col-md-12">
<div class="card">
<div class="card-category">Popular</div>
<div class="card-description">
<h2><%= tribune.title %></h2>
<p><%= tribune.content.split[0...25].join(' ') %>...</p>
</div>
<img class="card-user" src="https://kitt.lewagon.com/placeholder/users/tgenaitay">
<%= link_to "", tribune, :class => "card-link" %>
</div>
</div>
<% end %>
<% end %>
</div>
<div class="center-paginate">
<%= will_paginate #tribunes, renderer: BootstrapPagination::Rails %>
</div>
</div>
</div>
When all Goole-fu fails, we have to dig in the source code. There we find some interesting methods:
# Any will_paginate-compatible collection should have these methods:
# current_page, per_page, offset, total_entries, total_pages
#
# It can also define some of these optional methods:
# out_of_bounds?, previous_page, next_page
From these, the method next_page looks interesting, as it seems to return nil if there are no more pages.
Now we can construct the loop:
<% #tribunes.each do |tribune| %>
<% if !#tribunes.next_page && tribune == #tribunes.last %>
<!-- We're on the last page and the last tribune of that page -->
Last tribune content
<% else %>
<!-- We still have tribunes to go -->
Normal tribune content
<% end %>
<% end %>
So, I have an app that is trying render 2 (or maybe more if needed) columns using a loop. It does one column and looks pretty good, but I want the option of 2 or even more. I know about "in_groups.of()", but I can't quite figure it out to work with my
<% #vendors.each do |vendor| %>
<%= link_to vendor do %>
<div class="row">
<div class="col-md-6">
<div class="card-container">
<div class="col-md-6">
<div class="card">
<%= image_tag attachment_url(vendor, :background_image), class: 'card-img-top' %>
<div class="card-block">
<h4 class="card-title"><%= vendor.Company %>. </h4>
<p class="card-text"><%= vendor.Description.html_safe.first(25) %></p>
<div class="card-standing"><strong><%= vendor.FinancialStanding %></strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
Not sure why you needed this, because everything can be managed with css and html. But you can make changes like this:
<% #vendors.to_a.in_groups_of(2).each do |vendor| %> # #vendors.to_a cover AR to array
<% vendor.each do |v| %> # becuase vendor is array here.
..........your code..............
<% end %>
<% end %>
Rails: Need help looping through model array to link to the show page. I want to show the name, but link to the path. Seems like it should be simple but I have been coding all night and my brain is fried! please help.
<div class="container">
<div class="row">
<% #bars.each do |bar| %>
<div class="col-xs-6 something">
<div class="firstBar">
<%= link_to bars_path %>
<% end %>
</div>
</div>
</div>
</div>
This should work:
<div class="container">
<div class="row">
<% #bars.each do |bar| %>
<div class="col-xs-6 something">
<div class="firstBar">
<%= link_to bar.name, bar %>
</div>
</div>
<% end %>
</div>
</div>
You could also do <%= link_to bar.name, bars_path(bar) %>, but is prettier to just give the object. Rails will know which Url helper to use given a specific object.
Take a look at the UrlHelper documentation
Try this
<div class="container">
<div class="row">
<% #bars.each do |bar| %>
<div class="col-xs-6 something">
<div class="firstBar">
<%= link_to bar.name, bar_path(bar) %>
</div>
</div>
<% end %>
</div>
</div>
I am trying to use in_groups_of to sort my rails html output into two columns. Right now it just displays as one column. Here is the code:
<% #providers.in_groups_of(2).each do |group| %>
<div class="row">
<% group.each do |provider| %>
<div class="col-xs-6">
<h3><%= link_to provider.name, provider_path(provider) %></h3>
<h4><%= provider.address %></h4>
</div>
<% end %>
Your div.col-md-12s are each taking up the width of an entire row. Try changing them to col-xs-6. (I'm using xs so it will show up on any size of window; ignore this if not appropriate to your situation.)
<% #provider.in_groups_of(2).each do |group| %>
<div class="row">
<% group.each do |provider| %>
<div class="col-xs-6">
<h3><%= link_to provider.name, provider_path(provider) %></h3>
<h4><%= provider.address %></h4>
</div>
<% end %>
</div>
<% end %>
I have created commenting system to provide functions like creating comments and replying them.
I used http://www.sitepoint.com/nested-comments-rails/ guide. Worked just perfect. But in this example to reply to some comment it goes to other path, that is what I want to avoid.
Code so far:
Advertisement#show here I want to create reply to comment.
<%= comments_tree_for #comments %>
<h1>New comment</h1>
<%= render 'comments/form' %>
_comment.html.rb
<div class="well">
<h2><%= comment.title %></h2>
<p class="text-muted"><%= comment.root? ? "Started by" : "Replied by" %> <strong><%= comment.author %></strong> on
<%= l(comment.created_at, format: '%B, %d %Y %H:%M:%S') %></p>
<blockquote>
<p><%= comment.body %></p>
</blockquote>
<% from_reply_form ||= nil %>
<% unless from_reply_form %>
<% if comment.leaf? %>
<small class="text-muted">There are no replies yet - be the first one to reply!</small>
<% end %>
<p><%= link_to 'reply', new_comment_path(comment.id) %></p>
<% end %>
</div>
_form.html.erb
<%= form_for(#comment) do |f| %>
<% if #comment.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#comment.errors.count, "error") %> prohibited this comment from being saved:</h2>
<ul>
<% #comment.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= f.hidden_field :advertisement_id, :value => #advertisement.id%>
<%= f.hidden_field :user_id, :value => current_user.id%>
<%= f.hidden_field :parent_id %>
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, class: 'form-control', required: true %>
</div>
<%= f.submit class: 'btn btn-primary' %>
<% end %>
Is there any trustworthy guide to help me ?
The link_to 'reply', new_comment_path(comment.id) line creates a hyperlink to new comment page and when clicked it takes you to next page to create the comment. Instead you can replace it with a div containing the form the toggles and submits new convo from the same page. Bootstrap comes handy here.
A Mock up of the idea: http://jsfiddle.net/bpya4fce/1/
You can build up using this idea. Hope this helps :)
P.S: Make sure that you fetch the variables required for the form in the action of view where you embed the form, i.e if you're embedding the form in show.html.erb, ensure the necessary variables are fetched in the show action/method of controller. In the earlier scenario, it'll be fetched in the new action of the CommentsController.
<div class="container">
<blockquote>
<h2>Posted Comment</h2>
Lorem Ipsum. You can reply to this below.
</blockquote>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
Click to reply
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
### The comment form comes here ###<br/>
### render :partial => 'comment/form'
</div>
</div>
</div>
</div>
Not sure if this is what you wanted. Hope this example code gives you some idea.
Be sure to complete the code and test it :)
_comment.html.rb
<% from_reply_form ||= nil %>
<% unless from_reply_form %>
<% if comment.leaf? %>
<small class="text-muted">There are no replies yet - be the first one to reply!</small>
<% end %>
<!-- HERE adding a hidden DIV that contains a form. -->
<div class='hidden-reply-form-<%= comment.id%>'>
<%= render partial: 'comments/form', locals: {comment: Comment.new} %>
</div>
<p><%= link_to 'reply', new_comment_path(comment.id), class: 'reply', id: comment.id %></p>
<% end %>
</div>
<script>
// HERE use reply link to toggle the hidden div.
$(function(){
$(".reply").click(function(){
// toggle replying div.
// .....
});
})
</script>