How to change an erb variable with JavaScript?

Question

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> 

Thanks for your help!

Answer 1

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); }