Really, I lost my whole day on building proper html, rendered as js,
<tr>
<td><%= c.club_name.capitalize %></td>
<td><%= c.full_address %></td>
<td>
<%= link_to player_path(c), :"data-no-turbolink" => true, target: "_blank" do %>
<span class="glyphicon glyphicon-play-circle"></span>
<% end %>
</td>
<td>
<%= link_to edit_club_path(c) do %>
<span class="glyphicon glyphicon-pencil"></span>
<% end %>
</td>
<td>
<%= link_to c, method: :delete, data: { confirm: 'Are you sure?' } do %>
<span class="glyphicon glyphicon-trash glyphicon-red"></span>
<% end %>
</td>
</tr>
and the content for show.js.erb which is rendered as html is as:
var name = <%= #club.club_name.capitalize %>;
var addr = <%= #club.full_address %>;
var link_player = <%= link_to player_path(#club), :"data-no-turbolink" => true, target: "_blank" do %>
'<span class="glyphicon glyphicon-play-circle"> </span>'.html_safe
<% end %>
var link_edit = <%= link_to edit_club_path(#club) do %>
'<span class="glyphicon glyphicon-pencil"></span>'.html_safe
<% end %>
var link_delete = <%= link_to #club, method: :delete, data: { confirm: 'Are you sure?' } do %>
'<span class="glyphicon glyphicon-trash glyphicon-red"></span>'.html_safe
<% end %>
$('#club_add').modal_success();
<% flash[:notice] = "Club created successfully" %>
var out_data = $.parseHTML("<tr><td>"+name+"</td><td>"+addr+"</td><td>"+link_player+"</td><td>"+link_edit+"</td><td>"+link_delete+"</td></tr>");
$('#clubs_table_tbody').prepend(out_data);
I'm getting js syntax error, how to build the first code or string as proper html to be rendered in browser ?
Related
I can't apply properly the table class of bootstrap in a rails view. Bootstrap's lib are correctly included because I can apply the rounded corner to an existing image. Any idea?
<table class="table table-hover">
<% #city.fields.each do |field| %>
<tr>
<td>
<% case field.kind %>
<% when 'futbol'%>
<%= link_to image_tag("futbol.jpg", class:"img-rounded", alt: "Futbol"),'http://rubyonrails.org/' %>
<% when 'futsal'%>
<%= link_to image_tag("polillerena.jpg", class:"img-rounded", alt: "Futbol sala"),'http://rubyonrails.org/' %>
<% when 'padel'%>
<%= link_to image_tag("raqueta_padel.jpg", class:"img-rounded", alt: "Padel"),'http://rubyonrails.org/' %>
<% when 'pingpong'%>
<%= link_to image_tag("pingpong.jpg", class:"img-rounded", alt: "Ping Pong"),'http://rubyonrails.org/' %>
<% when 'tenis'%>
<%= link_to image_tag("raqueta_tenis.jpg", class:"img-rounded", class:"img-rounded", alt: "Tenis"),'http://rubyonrails.org/' %>
<% end %>
</td>
<td>
<p><h2><%= field.name %></h2></p>
<p><%= field.other %></p>
</td>
</tr>
<% end %>
</table>
I want that, depending on the width of the browser, tables should be created or deleted.
In CSS, you can use something like: `#media (min-width: 767px), whereas css-settings change, after width passes 767px. Is there something similar for ruby on rails? For example:
In my book/view.html.erb there is a table like this:
<table>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Description</th>
</tr>
<tr>
<td><%= #book.title %></td>
<td><%= #book.genre %></td>
<td><%= #book.desc %></td>
</tr>
</table>
What I want is, that, after width gets smaller than 767px, it should look like this:
Title: <br>
<%= #book.title %><br>
Genre: <br>
<%= #book.genre %>
Description:
<%= #book.desc %>
How can I accomplish this? Thanks in advance!
Is there something similar for ruby on rails
Yes, it's called browser - a gem:
[Browser] adds a helper method called browser, that inspects your current user agent:
#app/views/controller/your_view.html.erb
<% if browser.tablet? || browser.mobile? %>
... do something ...
<% end %>
--
The problem with this, however, is that it only works when you render the page.
CSS Media queries adapt when the page changes dimension, meaning that if you decide to resize the app on your desktop, the CSS will immediately adapt.
Rails compiles code based on an HTTP request, meaning that it cannot "change" as CSS does. Whilst this shouldn't be a problem for tablets etc, it may cause issues for desktops.
Solution
What I want is, that, after width gets smaller than 767px, it should look like this
<% if browser.mobile? %>
Title: <br>
<%= #book.title %><br>
Genre: <br>
<%= #book.genre %>
Description:
<%= #book.desc %>
<% else %>
<table>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Description</th>
</tr>
<tr>
<td><%= #book.title %></td>
<td><%= #book.genre %></td>
<td><%= #book.desc %></td>
</tr>
</table>
<% end %>
A completely CSS solution (highly recommended):
#app/assets/stylesheets/application.css
#media screen and (max-width: 767px) {
.big { display: none; }
.small { display: block; }
}
#app/view
<%= content_tag :div, class: "big" do %>
<table>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Description</th>
</tr>
<tr>
<td><%= #book.title %></td>
<td><%= #book.genre %></td>
<td><%= #book.desc %></td>
</tr>
</table>
<% end %>
<%= content_tag :div, class: "small" do %>
Title: <br>
<%= #book.title %><br>
Genre: <br>
<%= #book.genre %>
Description:
<%= #book.desc %>
<% end %>
I'm rails beginner.
I want to make two button that are placed in a line.
How can I put the button correctly on a line of the table?
Two buttons:
<%= button_to "empty Cart", #cart, method: :delete %>
<%= submit_tag "Delete item" %>
my view
<%= form_tag destroy_multiple_carts_path, method: :delete do %>
<table class="table">
<tbody>
<tr>
<td class = "checkbox_size_sm"><input type="checkbox"></td>
<td class = "image">ITEM</td>
<td class = "title"> </td>
<td>PRICE</td>
</tr>
<% #cart.line_items.order(created_at: :desc).each do |item| %>
<tr>
<td><%= check_box_tag "item_ids[]", item.id %></td>
<td class = "image"><%= image_tag item.product.item, size: "100" %>
</td>
<td class = "title" id = "td_align_middle">
<%= item.product.title %><br>
<%= item.product.brand %>
</td>
<td id = "td_align_middle"><%= item.product.price %></td>
</tr>
<% end %>
</tbody>
<tfoot>
<tr>
<td colspan = "4" class="total_price" >
Total Price <strong> <%= #cart.cart_total_price %> </strong>
</td>
</tr>
<tr>
<td colspan ="4" class="al-r">
<%= button_to "empty Cart", #cart, method: :delete %> <%= submit_tag "Delete item" %>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
Help me..
wrap those buttons in a div, set the div to float left and overflow hidden
add hose two buttons in div with class divname and in css file add below style to
div.divname button { float:left; margin-right:10px; }
I have following tables in rails
<%= link_to 'New Voice', new_voice_path, class: "btn btn-danger btn-lg" %>
<table>
<tbody>
<% #voices.each do |voice| %>
<tr class = "opinion-list">
<td id = "opinion"><%= voice.opinion %></td>
<td><%= link_to 'Show', voice, class: "crud" %></td>
<td><%= link_to 'Edit', edit_voice_path(voice), class: "crud" %></td>
<td><%= link_to 'Destroy', voice, method: :delete, data: { confirm: 'Are you sure?' }, class: "crud" %></td>
</tr>
<% end %>
</tbody>
</table>
and it outputs this screen http://imgur.com/RBpOb2G
How can I add CSS class to each of the voice so that each individual "voice" can have margin? Right now it looks too crowded and reads like one huge paragraph so I'd like to have some spacing between them.
I tried adding margin/padding to opinion-list but that doesn't work.
I've also tried using the content_tag like so
<%= link_to 'New Voice', new_voice_path, class: "btn btn-danger btn-lg" %>
<table>
<tbody>
<% #voices.each do |voice| %>
<%= content_tag(:div, class: "box") do%>
<tr class = "opinion-list">
<td id = "opinion"><%= voice.opinion %></td>
<td><%= link_to 'Show', voice, class: "crud" %></td>
<td><%= link_to 'Edit', edit_voice_path(voice), class: "crud" %></td>
<td><%= link_to 'Destroy', voice, method: :delete, data: { confirm: 'Are you sure?' }, class: "crud" %></td>
</tr>
<%end%>
<% end %>
</tbody>
</table>
and style with the .box class but that also does not work.
I have two tables in my view; trying to change the background of alternate rows in one table. In my style file I am using:
.alternateRow
{
table-layout: auto;
border-collapse: collapse;
border-spacing: 0px;
empty-cells: hide;
}
.alternateRow tr {
background-color:#aa0000;
}
.alternateRow tr.odd {
background-color:#00AA00;
}
This is how I make the dynamic table:
<table class="alternateRow">
<% List<Question> wrongs = ViewBag.wrongs;
for (var i = 0; i < wrongs.Count; ++i)
{ %>
<tr>
<td>
<%= wrongs[i].TheQuestion %>
</td>
<td>
Correct Answer
</td>
<td>
<%= wrongs[i].CorrectAnswer %>
</td>
<td>
<%= wrongs[i].Explanations %>
</td>
</tr>
<% } %>
I did not work, both rows have the same color. Any idea what I am doing wrong?
Here is what you can do:
<% List<Question> wrongs = ViewBag.wrongs;
for (var i = 0; i < wrongs.Count; ++i)
{
var rowClass = ((i % 2) == 0 ? "" : "odd"); // or whatever your alternate row class is
%>
<tr class="<%= rowClass %>">
<td>
<%= wrongs[i].TheQuestion %>
</td>
<td>
Correct Answer
</td>
<td>
<%= wrongs[i].CorrectAnswer %>
</td>
<td>
<%= wrongs[i].Explanations %>
</td>
</tr>
<% } %>