Question

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

在左表中，我显示了我在数据库中拥有的所有客户端，第一列表示客户端的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元素中的网址加载到侧边栏中。您只需将代码调整到控制器并查看即可使其工作。

Answer 2

你可以获得点击的tr的第一个td的innerText mydomain.net，但你需要在回调中接受事件，如var id = $(e.currentTarget).children().first()[0].innerText;

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

但是我不确定这是如何工作的，也许我误解了但是不是服务器上呈现的$('#table_clients tbody').on('click', 'tr', function(e) {？

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对象，该元素作为上下文。

如何通过jQuery传递id来呈现部分？

3 个答案: