单击 link_to 和 AJAX 后如何在同一页面上呈现部分内容

Question

我有一份客户名单。每个客户都有一个 link，它 link 发送到客户页面并显示他的数据。

我想 link 部分呈现在 table 客户下方的同一页面上。在使用 table 初始化 "page" 时，应加载包含 "select a customer" 之类内容的空白页。

我的客户列表代码：

<h1>Listing Customers</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="3">Actions</th>
    </tr>
  </thead>

  <tbody>
    <% @customers.each do |customer| %>
      <tr>
        <td><%= customer.name %></td>
        <td><%= link_to 'Show', customer %></td>
        <td><%= link_to 'Edit', edit_customer_path(customer) %></td>
        <td><%= link_to 'Destroy', customer, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>

  </tbody>
</table>

<br>

<%= link_to 'New Customer', new_customer_path, class: "button", id: "new_customer" %>

我展示客户的部分：

<p>
  <strong>Name:</strong>
  <%= @customer.name %>
  <%= @customer.id %>
</p>

<%= link_to 'Edit Customer', edit_customer_path(@customer) %> |
<%= link_to 'Back', customers_path %>

你能帮我出点主意吗？

Answer 1

您基本上想使用 AJAX 来显示客户的详细信息。为此，您可以使用 rails 为 link_to 助手提供的 remote: true 选项。接下来我们要做什么：

创建一个 div 来包含加载的数据。在这种情况下 div#current_customer

将 remote: true 添加到您的 link :

<td><%= link_to 'Show', customer, remote: true %></td>

命名你的部分customers/_show.html.erb（不要忘记_所以它可以被称为部分）：

<p>
   <strong>Name:</strong>
   <%= @customer.name %>
   <%= @customer.id %>
</p>

<%= link_to 'Edit Customer', edit_customer_path(@customer) %> |
<%= link_to 'Back', customers_path %> # You should remove this link

在CustomersController中的show方法中响应Javascript:

respond_to do |format|
  format.js {render layout: false} # Add this line to you respond_to block
end

创建您的 show.js.erb 视图，它将在调用 respond_to :js 时处理前端更改（在本例中由 remote: true 触发)
告诉 show.js.erb 它必须做什么（将 #current_customer 内容替换为您的部分内容，使用正确的 @customer）：

customers/show.js.erb

$("#current_customer").html("<%= escape_javascript(render partial: 'customers/show', locals: { customer: @customer } ) %>");

customers/index.html.erb

姓名动作

<div id="current_customer"> # This will will contain the partial 
</div>

单击 link_to 和 AJAX 后如何在同一页面上呈现部分内容

How to render partial on the same page after clicking on link_to with AJAX

ajax

asynchronous

ruby-on-rails

partial

customers/show.js.erb

customers/index.html.erb