Rails+jQuery: Get the Value of an Item Inside a Table to Use in a Prepend Function

Question

Say I have a table:

<table class="table table-bordered table-hover employes_list_panel">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th class="center">Name <i class="fa fa-angle-double-down"></i></th>
          <th class="center">IQ <i class="fa fa-angle-double-down"></i></th>
          <th class="center">Efficiency <i class="fa fa-angle-double-down"></i></th>
          <th class="center">Focus <i class="fa fa-angle-double-down"></i></th>
          <th class="center">Happiness <i class="fa fa-angle-double-down"></i></th>
          <th class="center">Quality <i class="fa fa-angle-double-down"></i></th>
          <th class="center">Salery <i class="fa fa-angle-double-down"></i></th>
        </tr>
      </thead>

      <tbody>
      <%Employe.where(company_id: company.id, request: false).each do |employe|%>
        <tr>
          <td class="center cd-popup-trigger" id="popup3"><i style="color: red;" class="fa fa-close"></i></td>
          <td class="center cd-popup-trigger" id="popup4"><i style="color: green;" class="fa fa-arrow-up"></i></td>
          <td class="center"><%=employe.name%></td>
          <td class="center"><%=employe.iq%></td>
          <td class="center"><%=employe.efficiency%></td>
          <td class="center"><%=employe.focus%></td>
          <td class="center"><%=employe.happiness%></td>
          <td class="center"><%=employe.quality.capitalize%></td>
          <td class="center"><%=employe.salery%></td>
        </tr>
      <%end%>
      </tbody>
    </table>

And I want to get the value of the employe name <%=employe.name%> when popup3 for example is clicked. Note there can be more than one "employe" in the list. How can I get the value of the employe that is on the line where the user clicked the popup, so that I can prepend it using jQuery into the popup <p>.

Ex:

Click to Open Popup | Kevin |...

Click to Open Popup | Sam |...

I need to get the value Sam when I click the "second popup", the problem is all popups currently have the same id.

Thank you.

Answer 1

Given your code, popup3 (and popup4 for that matter) is gonna be present multiple times on the page (once per tr). You need to give it a class, not an id. I personally like to prefix my JavaScript classes (not used for styling) with js-. In your HTML:

<td class="center cd-popup-trigger js-popup3"><i style="color: red;" class="fa fa-close"></i></td>

You also need to identify the cells which contain the employee name (you'll see why later).

<td class="center js-employee-name"><%= employe.name %></td>

In your JS code, you first need to select the all the td with the js-popup3 class:

$('js-popup3')

Then, you want to trigger something when an event occurs on the element you selected. With jQuery, you would do it like this:

$('js-popup3').on('click', function() {});

Lastly, you want to describe what should be done when the event occurs. This is done in the callback function.

$('.js-popup3').on('click', function() {
  # employeeName is the value you want
  employeeName = $(this).siblings('.js-employee-name').text();
});

I invite you to read a lot about JS (try to code without jQuery first). Once you feel confident with it, start looking at jQuery.

Answer 2

To make the popups ahve unique id's according to employee try something like this: ">

Then I presume you have some js somewhere to handle the popup clicks. This js can extract the employee id with

emp_id = my_clicked_popup_trigger.attr("id").split('-')[-1]

Answer 3

You can create a click function for the Table tr's and get the value of the third column (index 2):

$('table.reference.notranslate tbody').delegate("tr", "click", function(){
       var YourEmployeName = $(this).find('td').eq(2).text();
       alert(YourEmployeName);
    });