1

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";
      }
    }
  }
Dbz
  • 2,721
  • 4
  • 35
  • 53
Curtis M
  • 905
  • 1
  • 8
  • 14
  • You second code does not set the same classes as the first code, I'm not sure I understand your question, what's the problem with the ternary operator? is it not working? I think I would move that logic to a helper though – arieljuod Jun 24 '19 at 22:46
  • Yeah the first was before I changed the class names. I have other ternary in my code inline but using == with 2 <%= %> tags does not seem to change the css class I am calling. – Curtis M Jun 25 '19 at 00:12

3 Answers3

2

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.

Nick M
  • 2,424
  • 5
  • 34
  • 57
  • Nick , that is exactly what I have and it is not working. I definitely read up before I asked this question. For some reason using the == is not working. – Curtis M Jun 24 '19 at 22:46
  • 2
    What does "not working" mean? Do you get errors? Does it produce the wrong result? If so, what result? You may need to put in a diagnostic `<%= (track.user.username == current_user.username).inspect) %>` – tadman Jun 24 '19 at 22:47
  • I have never used .inspect before ? I'll look it up. (I have been coding for a little over a year) Thanks for your help. – Curtis M Jun 24 '19 at 22:55
1

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.

Dbz
  • 2,721
  • 4
  • 35
  • 53
  • I already had this but it messed up my search function I had because I was unable to access the values. I like the idea of adding a @rendered_name in the controller as a work around. – Curtis M Jun 24 '19 at 22:51
  • As a rule, views and templates should have 0 logic in them. In this case, the `@rendered_name` isn't a workaround as much as a better way to design your views. Once you get in this habit, debugging view logic will become way easier. – Dbz Jun 24 '19 at 22:57
  • Instead of debugging why you can't access the `` values (do you mean the class values?), I would first start with this approach, and then ask a question if it isn't working as expected. – Dbz Jun 24 '19 at 22:58
  • I added my search function to the code above. --- I get undefined values if I use an ruby if statement. I figured I could get away with writing it inline. I did mean or class becuase I am using getElelmentsByClassName() and I also tried querySelectorAll() – Curtis M Jun 25 '19 at 00:16
1

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>
Curtis M
  • 905
  • 1
  • 8
  • 14
  • 1
    Now that you have it working, would you consider separating the logic out of the view and into the controller (or helper)? – Dbz Jun 25 '19 at 00:36
  • Is that better practice? I did that with the tracks that were populating but I thought color changes of names could be left in the html..I would love advice or direction. – Curtis M Jun 25 '19 at 03:44
  • 1
    Yes, as much as possible you want to reduce logic in views. Not only is it extremely difficult to test, but now you have another [usually messy] layer to debug when things aren't working. Try googling "rails views logic" and you'll see a bunch of articles talking about ways to get around putting logic in views :) – Dbz Jun 26 '19 at 21:16