javascript - how to render a partial by passing an id through jQuery? -

i feel dumb , ashamed. started learning jquery , got stuck @ first day. basically, building of in ruby on rails, , have list of clients basic info name, address, phone number, etc. in picture below page layout (yes, know.. born artist).

in left table, display clients have in database, first column represents client's id , second column shows names. in right table (it partial), display full client's info. my objective this: clicking on row, on left table, right table update , show info related client selected. here tried:

<script> $('#table_clients tbody').on('click', 'tr', function() {    $("#container_info").replacewith(       '<%= j render :partial  => "client_info", :locals =>  {:client => 1} %>'    ); }); </script> 

notice manually specified client's id. my question is, how can identify row selected , pass id erb fragment ?

i can id calling this:

$(this).find(':nth-child(0)').text(); 

but dont know how pass inside erb fragment. work around ? there better way using replacewith method, first idea got.

when starting out javascript avoid falling temptation of mixing javascript , whatever server side language using.

you end overcomplicated mess , tons of confusion happening where. pretty common misstake , there no reason feel ashamed.

using ajax suggested oleander alternative - classic way setup sliders or tabs using ancor links.

so first lets setup table:

<table id="table_clients">   <thead>    <tr>      <td>id</td>      <td>name</td>    </tr>   </thead>   <tbody>     <%= clients.each |client| %>       <tr>         <td>           <%= client.id %>         </td>         <td>           <%= content_tag :a, client.name, href: "client-<%= client.id %>" %>         </td>       </tr>     <% end %>   </tbody> </table> 

note <%= content_tag :a, client.name, href: "client-<%= client.id %>" %> part. render like:

<a href="#client-1">acme corp.</a> 

so lets create details on right side:

<% if clients.any %> <ul id="client-details">   <%= clients.each |client| %>   <li id="client-<%= client-id %>">     <%= client.details # or whatever %>   </li>   <% end %> </ul> <% end %> 

even without javascript browser jump down linked tab. progress!

so lets enhance behavior javascript:

// hide first $('#client-details li').not(':first').hide();  $('#table_clients').on('click', 'tr,a', function() {   var id, target;    // don't know if user clicked link or row   if (this.tagname === 'a') {     id = this.href;   } else {     id = $(this).find('a').attr('href');    }    // since href equal id can use selector   target = $(id);   target.show(); // show target   $('#client-details li').not(target).hide(); // hide others   return false; // prevents view jumping if user clicked link }); 

note this special keyword in javascript changes meaning depending on concept. when attach click handler element user clicked. $(this) gives new jquery object element context.