How to set a css class based on content in rails

Question

I am very new to Rails and web app development in general so appologies if this is something basic,

My issue is I am looking for a way in rails to set a CSS class based on the value of an object.

Using the bootstrap framework inside my rails application I have a table that shows a list of orders which each have a state, it can be in various states for example: "Created, In Progress , Exception"

Depending on what state that order is in I would like to use a CSS label such as <span class="label label-warning>" for exception state or <span class="label label-success"> for Created or In Progress.

I was thinking perhaps have a helper method somewhere and call that from the view to work it out? Not sure if I have missed something basic as I am sure this is something that comes up in every application?

orders\index.html.erb
<div>
<h1>Listing orders</h1>

<table>
  <thead>
    <tr>
      <th>Customer</th>
      <th>Order ID</th>
      <th>Order State</th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <% @orders.each do |order| %>
      <tr>
        <td><%= order.customer.name %></td>
        <td><%= order.id %></td>
        <td> <span class="label label-warning><%= order.state %></span></td>
        <td><%= link_to 'Show', order %></td>
        <td><%= link_to 'Edit', edit_order_path(order) %></td>
        <td><%= link_to 'Destroy', order, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        <td><%= link_to 'Exception', exception_order_path(order), method: :post %>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

i'm slightly confused, you haven't really presented your information in a way that clearly describes what you need. if i'm not mistaken, wouldn't a simple if/elsif statement achieve what you need? — user926352
– user926352, Commented Jun 18, 2013 at 22:03

Jacob Brown · Accepted Answer · 2013-06-19 13:40:30Z

6

Not sure if this is what you are looking for, but you can do something like this:

content_tag(:td, '', :class => (@obj == 'x' ? 'something' : 'somethingElse'))

If your condition testing is complicated, yes, I would use a helper method. Then you could do something like:

content_tag(:td, '', :class => name_of_helper_method(@obj))

where the helper method returns a string for the class name you want to set.

Edit: this might be what you are looking for:

<td><span class="label <%= order.state == 'Created' ? 'label-success' : 'label-warning' %>"></span></td>

edited Jun 19, 2013 at 13:40

answered Jun 18, 2013 at 22:04

Jacob Brown

7,5615 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ahnbizcad Over a year ago

How would you get this to work without having to reload the page, if you are trying to use remote: true?

Jacob Brown Over a year ago

@gwho, I'm not exactly sure--it's been a while since I've used data-remote and I'm not familiar with all the magical options. I would think you would want to have some JS (maybe to toggle the class), that would hook into the ajax:success event. See here for more info: edgeguides.rubyonrails.org/….

Collectives™ on Stack Overflow

How to set a css class based on content in rails

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related