如何通过jQuery传递ID来呈现部分内容？

Question

I feel really dumb and ashamed. Just started learning jQuery and got stuck at the first day. Basically, I am building all of this in ruby on rails, and I have a list of clients with basic info like name, address, phone number, etc. In the picture below is my page layout (yes, I know.. born artist).

In the left table, I display all the clients I have in database, first column represents client's id and the second column shows their names. In the right table (it is a partial), I display full client's info. My objective is this: by clicking on the row, on the left table, the right table would update and show the info related to that client I selected. Here is what I tried :

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

Notice that I manually specified the client's ID. My question is, how can I identify which row I selected and pass the ID to the erb fragment ?

I can get the ID by calling this:

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

But dont know how to pass it inside erb fragment. What is the work around for this ? There are probably a better way than using replaceWith method, it was the first idea I got.

Answer 1

One solution is to do an ajax request to the backend fetching the partial in question.

Controller: app/controllers/clients_controller.rb

class ClientsController < ApplicationController
  #
  # GET /clients/:id/info
  #
  def info
    render partial: "client_info", locals: { client: params[:id] }
  end
end

Route: config/routes.rb

resources :clients do
  member do
    get :info
  end
end

View: app/clients/index.html.erb

<ul>
  <% @clients.each do |client| %>
    <li class="click" data-client-url="<%= info_client_path client.id %>">
      Click me <%= client.id %>
    </li>
  <% end %>
</ul>

<div class="side-panel">
  Waiting for data
</div>

Javascript: app/assets/javascripts/application.js

$(function(){
  $(".click").click(function(){
    $(".side-panel").load($(this).get("client-url"));
  });
});

It will load the url from the li element into the sidebar. You just have to adjust the code to your controller and view to get it to work.

Answer 2

You can get the clicked tr's first td's innerText var id = $(e.currentTarget).children().first()[0].innerText; but you need to take the event in the callback like $('#table_clients tbody').on('click', 'tr', function(e) {

Full js fiddle: https://jsfiddle.net/dattaproffs/788tkheh/

But i'm not sure how this will work, maybe i misunderstand but isn't the '<%= j render :partial => "client_info", :locals => {:client => 1} %>' rendered on the server?

Answer 3

When your starting out with javascript avoid falling for the temptation of mixing javascript and whatever server side language you are using.

You end up with an overcomplicated mess and tons of confusion about what is happening where. Its a pretty common misstake and there is no reason to feel ashamed.

Using AJAX as suggested by Oleander is a good alternative - but another classic way to setup sliders or tabs is by using ancor links.

So first lets setup the table:

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

Note the a <%= content_tag :a, client.name, href: "client-<%= client.id %>" %> part. This will render something like:

<a href="#client-1">Acme Corp.</a>

So lets create the details on the right side:

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

Even without javascript the browser will now jump down to the linked tab. Progress!

So now lets enhance the behavior with javascript:

// hide everything but the first
$('#client-details li').not(':first').hide();

$('#table_clients').on('click', 'tr,a', function() {
  var id, target;

  // we don't know if the user clicked a link or a row
  if (this.tagName === 'A') {
    id = this.href;
  } else {
    id = $(this).find('a').attr('href'); 
  }

  // since the href is equal to the id we can use it as a selector
  target = $(id);
  target.show(); // show the target
  $('#client-details li').not(target).hide(); // hide the others
  return false; // prevents the view from jumping if the user clicked a link
});

Note that this is a special keyword in javascript that changes meaning depending on the concept. When you attach a click handler it is the element that the user clicked. $(this) gives us a new jQuery object with that element as the context.