如何通过 jQuery 传递一个 id 来渲染一个部分？

Question

我感到非常愚蠢和羞愧。刚开始学习jQuery，第一天就卡住了。基本上，我正在用 ruby​​ on rails 构建所有这些，并且我有一个客户列表，其中包含姓名、地址、电话号码等基本信息。下图中是我的页面布局（是的，我知道.. 天生的艺术家）。

在左表中，我显示了我在数据库中拥有的所有客户，第一列代表客户的 ID，第二列显示他们的名称。在右表（它是部分表）中，我显示了完整的客户信息。 我的目标是：通过点击左侧表格中的行，右侧表格将更新并显示与我选择的客户相关的信息。 这是我尝试过的：

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

请注意，我手动指定了客户端的 ID。 我的问题是，如何识别我选择的行并将 ID 传递给 erb 片段？

我可以通过调用这个来获取 ID：

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

但不知道如何在 erb 片段中传递它。解决这个问题的方法是什么？ 可能有比使用 replaceWith 方法更好的方法，这是我得到的第一个想法。

Answer 1

一种解决方案是向后端发出 ajax 请求以获取相关部分。

控制器：app/controllers/clients_controller.rb

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

路线：config/routes.rb

resources :clients do
  member do
    get :info
  end
end

查看：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"));
  });
});

它将li 元素中的url 加载到侧边栏中。您只需将代码调整到您的控制器和视图即可使其工作。

Answer 2

你可以得到点击的tr的第一个td的innerTextvar id = $(e.currentTarget).children().first()[0].innerText;但是你需要像$('#table_clients tbody').on('click', 'tr', function(e) {这样在回调中接受事件

完整的js小提琴：https://jsfiddle.net/dattaproffs/788tkheh/

但我不确定这将如何工作，也许我误解了'<%= j render :partial => "client_info", :locals => {:client => 1} %>' 不是在服务器上呈现的吗？

Answer 3

当您开始使用 javascript 时，请避免陷入将 javascript 与您使用的任何服务器端语言混合在一起的诱惑。

您最终会陷入过度复杂的混乱局面，并且对发生的事情感到困惑。这是一个很常见的错误，没有理由感到羞耻。

按照 Oleander 的建议使用 AJAX 是一个不错的选择 - 但另一种设置 滑块 或 选项卡 的经典方法是使用 ancor 链接。

首先让我们设置表格：

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

注意<%= content_tag :a, client.name, href: "client-<%= client.id %>" %> 部分。这将呈现如下内容：

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

所以让我们在右侧创建详细信息：

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

即使没有 javascript，浏览器现在也会跳到链接的选项卡。进步！

现在让我们用 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
});

请注意，this 是 javascript 中的一个特殊关键字，它会根据概念改变含义。当您附加单击处理程序时，它是用户单击的元素。 $(this) 为我们提供了一个以该元素为上下文的新 jQuery 对象。