How do you write a conditional ternary operator inline in Ruby on Rails?

Question

I am trying to compare 2 values and change the color of one when the condition holds true. But I also have a search-bar and I could not access the tag values when it is wrapped in an <% if %> statement in my javascript function using Rails.

I originally had the code as so

 <% if track.user.username == current_user.username%>
   <td class="track_table_current_user">
     <span><%= track.user.username %></span>
   </td>
 <% else %>
   <td class="td-userName"> 
     <span class="track_table_user_name"><%= track.user.username %> </span>
   </td>
 <% end %> 

My Ternary as of now:

<td class="track_table_user_name <% track.user.username == current_user.username ? "this_current_user" : "other_user" %>">
    <%= track.user.username %>
</td>

The Search Function that I cannot access the values if I use an <% if %> <% else%>:

function trackTableSearch() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("trackTableInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("tracksTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    tdN  = tr[i].getElementsByClassName("td-trackName")[0];
    tdU = tr[i].getElementsByClassName("track_table_user_name")[0];
    tdR = tr[i].getElementsByClassName("td-trackApproved")[0];
    tdP = tr[i].getElementsByClassName("td-public")[0];
    if ((tdN) || (tdU) || (tdR) || (tdP)) {
      txtValueN  = tdN.textContent  || tdN.innerText;
      txtValueU  = tdU.textContent  || tdU.innerText;
      txtValueA  = tdR.textContent  || tdR.innerText;
      txtValueP  = tdP.textContent  || tdP.innerText;

      if (txtValueN.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      }else if (txtValueU.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else if (txtValueA.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      }else if (txtValueP.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      }else{
        tr[i].style.display = "none";
      }
    }
  }

Answer 1

You probably want to do something like:

<td class="<%= track.user.username == current_user.username ? "track_table_current_user" : "td-userName" %>">
    <%= track.user.username %>
</td>

See this answer to learn how to use the ternary operator, it works about the same in every language out there.

Answer 2

I would not use the ternary operator here because it makes your template code much more difficult to read. Instead, I would do an if-else statement. The ternary operator is really nice for very short if-else statements, but especially in rendered code, we want to reduce all logic possible, and when it's not possible, we want it to be as easy to parse as possible.

This is much easier to parse:

<% if track.user.username == current_user.username %>
  <td class="track_table_user_name <%= this_current_user %>>
<% else %>
  <td class="track_table_user_name <%= other_user %>>
...

I would even go as far as to make a @rendered_username variable in the controller so you don't have to do any of this logic.

Answer 3

I figured it out.... I am going to hate to admit this but i forgot the '=' symbol... uggggg why!?!?!

<td class="track_table_user_name \
    <% ***(right here)*** track.user.username == current_user.username ? "this_current_user" : "other_user" %>">
     <%= track.user.username %>
    </td>

Thanks everyone for your help and the .inspect, and to put a variable in the controler.

My working final :

<td class="track_table_user_name <%= (track.user.username == current_user.username) ? "this_current_user" : "other_user" %>"><%= track.user.username %></td>