Как изменить переменную erb с помощью JavaScript?

Question

Вот как я показываю данные. Как только пользователь нажмет на один из <td>, я хочу отобразить остальную часть данных из этой «empleado» на нижней панели. Я думал о захвате данных innerhtml из <td> и использовании идентификатора из экземпляра, чтобы изменить номер 12 для идентификатора, выбранного пользователем. Надеюсь, это прояснит мой предыдущий вопрос.

<!-- 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>

Спасибо за вашу помощь!

Answer 1

Я придумал эту идею. Буду признателен, если вы, ребята, сообщите мне, является ли это самым эффективным способом. Я сделал AJAX-вызов на сервер, а затем добавил его в 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); 
 
}