在使用AJAX单击link_to之后,如何在同一页面上呈现部分内容 [英] How to render partial on the same page after clicking on link_to with AJAX
问题描述
我有一个客户清单.每个客户都有一个链接,该链接链接到客户页面并显示其数据.
I have a list of customers. Every customer has a link, which links to the customers page and displays his data.
我想链接到客户表下方同一页面上呈现的部分内容.在使用表格初始化页面"时,应加载带有选择客户"之类的空白页面.
I want to link to partial rendered on the same page below the table of customers. On initializing the "page" with the table, a blank page with something like "select a customer" should be loaded.
我的客户"列表的代码:
My code for the Customers list:
<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
选项.接下来我们要做什么:
You basically want to use AJAX to display a customer's details. For this you can use the remote: true
option provided by rails for the link_to
helper. What we are going to do next :
-
创建一个将包含已加载数据的div.在这种情况下
div#current_customer
将remote: true
添加到您的链接中:
<td><%= link_to 'Show', customer, remote: true %></td>
为您的部分customers/_show.html.erb
命名(不要忘记_
,因此可以将其称为部分):
Name your partial customers/_show.html.erb
(don't forget the _
so it can be called as a partial) :
<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 Javascript in the show
method in CustomersController
:
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
触发)
Create your show.js.erb
view, which is going to handle the front-end changes when respond_to :js
is gonna be called (In this case triggered by remote: true
)
告诉show.js.erb
它必须做什么(使用正确的@customer
用您的部分内容替换#current_customer
内容):
Tell show.js.erb
what it must do (Replace #current_customer
content with your partial, using the right @customer
) :
customers/show.js.erb
$("#current_customer").html("<%= escape_javascript(render partial: 'customers/show', locals: { customer: @customer } ) %>");
customers/index.html.erb
姓名 动作
customers/index.html.erb
Name Actions<div id="current_customer"> # This will will contain the partial
</div>
这篇关于在使用AJAX单击link_to之后,如何在同一页面上呈现部分内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!