javascript - 如何通过 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

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

您最终会遇到一个过于复杂的困惑局面，并且对发生在何处的事情感到困惑。这是一个很常见的错误，没有理由感到羞耻。

按照 Oleander 的建议使用 AJAX 是一个不错的选择 - 但另一种设置 slider 或标签的经典方法是使用 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 对象，该对象作为上下文。