How to change an erb variable with JavaScript?

This is how I am displaying the data. Once the user clicks on one of the <td>, I want to display the rest of the data from that "empleado" on the bottom bar. I was thinking of grabbing the innerhtml data from the <td> and using the id from the instance to change the number 12 for the id selected by the user. I hope this clarifies my previous question.

<!-- index.html.erb -->
    <!-- TABLE -->

    <div class="panel panel-default lista">
      <div class="panel-heading">
        <h3 class="panel-title">Lista de Empleados</h3>
        <!-- link add empleado -->
        <% if can? :new, @empleado  %>
          <%= link_to "Agregar Empleado", new_empleado_path %>
        <% end %>

      </div>
      <div class="panel-body">
       <table class="table table-bordered">
          <thead>
             <th>Id</th>
             <th>Nombre</th>
             <th>Apellido</th>
             <th>Cedula</th>
             <th>Cargo</th>
             <th>Ciudad</th>
          </thead>
          <tbody>
             <% @empleados.each do |empleado| %>
             <tr class="shows">
                <% if can? :edit, empleado  %>
                <td><%=link_to empleado.id, edit_empleado_path(empleado) %></td>
                <% else %>
                <td><%= empleado.nombre %></td>
                <% end %>
                <td><%= empleado.nombre %></td>
                <td><%= empleado.apellidos %></td>
                <td><%= empleado.cedula %></td>
                <td><%= empleado.cargo %></td>
                <td><%= empleado.ciudad %></td>
             </tr>   
             <% end %>         
          </tbody>
       </table>   


       </div>
    </div>

    <!-- BOTTOM BAR -->
    <!--  -->
    <nav class="navbar navbar-default navbar-fixed-bottom lista-bottom">
      <div class="container show-empleado">
        <% @empleados.each do |empleado| %>
             <% if empleado.id == 12 %>
                <p><%= empleado.otherData %></p>
             <% end %>
        <% end %>
      </div>
    </nav>

Answers


I came up with this idea. I'd appreciate if you guys let me know whether that is the most efficient way. I made an AJAX call to the server and then I appended it to the DOM.

$('.shows').on("click", function(){
   var id = $(this).children("td")[0].innerText;
   showEmpleado(id);
});


function showEmpleado(id){
   console.log(id);
   $.ajax({
      type: "post",
      url: "/empleados/"+id,
      data: id,
      success: function(response, status){
        console.log("Status: ",status);
        displayEmpleado(response);
      }
   }); 
}

function displayEmpleado(empleado){
   console.log("empleado: ", empleado);
   $('.show-empleado').empty();
   $('.show-empleado').append(empleado.otherData);
}

Need Your Help

Retrieve Table Row Index of Current Row

javascript jquery validation

I am trying to validate a text input when it loses focus. I would like to know which row of the table it is in. This is what I have so far and it keeps coming back as undefined. Any ideas?

Getting an Embedded YouTube Video to Auto Play and Loop

html css youtube youtube-api

I am trying to get a basic Youtube video to auto play and auto loop embedded on a page, but I'm having no luck.