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

Question

我感到非常愚蠢和羞愧。 刚开始学习jQuery并在第一天就陷入困境。 基本上，我是在Rails上用ruby构建所有这些功能，并且有一个包含名称，地址，电话号码等基本信息的客户列表。下图是我的页面布局（是的，我知道..天生的艺术家）。

在左表中，显示数据库中拥有的所有客户端，第一列表示客户端的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的innerText var 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>

请注意a <%= 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对象，以该元素为上下文。