单击 link_to 和 AJAX 后如何在同一页面上呈现部分内容
How to render partial on the same page after clicking on link_to with AJAX
我有一份客户名单。每个客户都有一个 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 %>
你能帮我出点主意吗?
您基本上想使用 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,它 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 %>
你能帮我出点主意吗?
您基本上想使用 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>