Class name in html.erb file separated

user_10606250 0
Viewed 2265

I have an if statement inside a loop to change a variable (named var_class) for a class name. How can I make it continuous string?

Here is the code: 

<% j = 0%>
<% @question.each do |index| %>
<% var_class = ""%>
   <% j == 0 ? var_class = "tab-pane fade active show" : var_class = "tab-pane fade" %>
   <div class=<%=var_class %> style='height: 444px; overflow-y: auto;' id=<%="question#{j+=1}"%>>

But when i viewed the html in chrome inspect, it's not included as a continuous string but instead is separated when there is space. Like such: 

class= "tab-pane" fade active show

but i want it to be 

class = "tab-pane fade active show"

I've tried <div class=<%=#{var_class} %> and <div class=<%="var_class" %> and derivatives of that. Can someone help?

twitter-bootstrap erb ruby-on-rails html
3 Answers

I think that you're missing the quotes of class and id attributes. 

<div class='<%=var_class %>' style='height: 444px; overflow-y: auto;' id='<%="question#{j+=1}"%>'>
user_87428790

Messias' answer is the basics of it. Without the quotes around the string, the DOM is stopping the classes when it hits a space. It thinks the other items are attributes on the div tag.

In a best-practices kind of way, we typically want to avoid local assigns (where you set a variable) in the rails view. This really wants to be a helper or a decorator (if you really need that level of functionality and testability).

[The following is pseudo code that I haven't tested, so there may be some minor errors]

In your ERB view:

<% @questions.each do |index| %>
  <div class="<%= classy(index) %>" id="[TBD see below]">
<% end %>

I'd suggest finding a more semantic HTML tag than div if possible. Iterators (.each) tend to be a list of objects, so perhaps a UL (unordered list) or OL (ordered list) with LIs inside might be a better choice. ULs give you buttons and OLs give you numbers by default, but those can be changed.

You also probably want to avoid the # sign in a ID name, as you would call an ID in a css file with #name. So #name#2 will likely give you some unexpected and messy results in the DOM. You likely want to use each_ with _index to get both the array and the index value. Pretty good explanation of the differences here: What is the "right" way to iterate through an array in Ruby?

<ul class="questions">
<% @questions.each_with_index do |question,index| %>
  <li class="<%= classy(question, index) %>" id="question_<%= index %>">
    [CONTENT]
  </li>
<% end %>
</ul>

The helper method in whatever_helper.rb (matching the class name or application if site wide):

def classy(question, index)
  if index == 0
    "tab-pane fade active show"
  else
    "tab-pane fade"
  end
end

And while we're at it, lets get presentation markup out of the view. In your CSS file:

.tab-pane.fade {
  height: 444px;
  overflow-y: auto;
}

If you're trying to achieve something different, let us know. This was my best guess based on reading the question and code.

user_11218260

In Ruby you can use Enumerable#each_with_index to iterate through a collection with an index:

<% @question.each_with_index do |value, index| %>

<% end %>

<% end %>

In general in Ruby if you are using .each or any iterator with an external mutating variable you are doing it wrong.

You can also clean up the view by using content_tag:

<% @question.each_with_index do |value, index| %>
  <% 
      classes = ["tab-pane", "fade"] 
      classes = classes + ["active", "show"] if index == 0
  %>
  <%= content_tag :div, class: classes, id: "question#{index+1}" do %>

  <% end %>
<% end %>

The same approach can be used with straight ERB inpolation if you just join an array of classes:

<div class="<%= classes.join(" ")%>" ...
user_5448250
Related