如何在Rails上启用Turbolink的情况下通过AJAX正确渲染部分图像? [英] How to properly render a partial via AJAX with Turbolinks enabled on Rails?
问题描述
我目前正在使用Rails应用程序，该应用程序必须与外部Web API进行通信，从结果中更新数据库记录并异步更新视图.
I'm currently working on a Rails app that has to communicate with an external web API, update DB records from the result and asynchronously update the view.
我有一个list操作，我直接从数据库中显示数据，该数据由分页发送到表中的电子邮件列表组成.呈现视图后，我需要向应用程序发出AJAX请求(通过另一条路径)，该请求向外部Web API发出请求，更新数据库，然后使用包含所有电子邮件的table呈现部分内容，与原始list操作上呈现的效果相同.
I have a list action where I show data directly from the DB consisting of a list of emails sent in a table with pagination. After the view is rendered I need to make an AJAX request to the application (on a different route) that makes the request to the external web API, updates the DB and then renders the partial with the table that contains all the emails, the same that was rendered on the original list action.
以下代码处理AJAX请求:
The following code handles the AJAX request:
# _mail_list_loader.js.erb
document.addEventListener("turbolinks:load", function() {
$.ajax({
url: '/certified_mail/mail_list',
type: 'get',
data: {
page: <%= @page %>,
rut: <%= @rut || 'null' %>,
from: <%= @from || 'null' %>,
to: <%= @to || 'null' %>,
ids: <%= @outdated_message_ids.to_json.html_safe %>
}
});
});
哪个响应是一个.js.erb，它呈现了实际table的一部分:
Which response is a .js.erb that renders the partial of the actual table:
# mail_list.js.erb
$('#mail-list').html('<%= j render 'certified_mail/mail_list' %>');
_mail_list_loader.js.erb在我的application.html.erb中呈现:
# application.html.erb
<head>
...
<script><%= render 'certified_mail/mail_list_loader.js' %></script>
</head>
我的控制器如下所示:首先加载表格的操作和处理AJAX请求的操作:
My controller looks like this for the action that first loads the table and the action that handles the AJAX request:
class CertifiedMailController < ApplicationController
def list
if params[:page].nil? || params[:page].to_i <= 0
redirect_to action: :list, params: {
page: 1,
from: params[:from].to_s.empty? ? nil : params[:from],
to: params[:to].to_s.empty? ? nil : params[:to]
}
else
# Handle filters and get emails from the DB
end
end
def mail_list
if request.xhr?
# Make API request, update accordingly,
# handle filters and get emails from the DB
respond_to do |format|
format.js
end
else
redirect_to action: :list
end
end
end
我的问题是什么
第一次加载页面时，它是从控制器加载的，并且AJAX请求已正确发送，但是如果我转到下一页(发送具有不同GET参数page的请求)，则页面将直接加载从控制器发出，但是发送了两个AJAX请求，一个用于第一页，一个用于第二页，如下所示，并且table的HTML随机变化，在table中未真正显示正确的数据:
What my problem is
When the page first loads, it loads from the controller, and the AJAX request is correctly sent, but if I go to the next page (which sends a request with a different GET parameter page), the page loads directly from the controller, but two AJAX requests are sent, one for the first page and one for the second page, as shown below, and the HTML for the table kinda changes randomly, not really showing the right data in the table:
我曾经有一个JavaScript，它在body而不是header内定义AJAX请求，但是那样的话，每次页面更改时，这些请求就会不断重复，每次都有越来越多的请求.我进行了一些搜索，发现可以通过将代码移至head来解决额外呼叫的问题.
I used to have the JavaScript that makes the AJAX request defined inside the body and not the header but that way the requests would just keep duplicating on every page change, having more and more requests every time. I did some searching and found that the issue of having extra calls could fixed by moving the code to the head.
我真的不知道我的问题是否与Turbolinks处理请求严格相关，但是我需要的是应用程序呈现完整视图，然后将具有完全相同的GET参数的AJAX请求发送到另一种只是将部分内容与表格一起呈现的动作.
I don't really know if my issue is strictly related to how Turbolinks handles the requests, but what I need is for the application to render the full view and then send an AJAX request with the exact same GET params to a different action that just renders the partial with the table.
任何帮助将不胜感激！
推荐答案
从我在此答案中读到的内容完全链接我的JavaScript完全需要某些链接上的Turbolink，因此我转到了分页链接，该分页链接发送了更改参数的请求(例如page)，并简单地向其中添加了'data-turbolinks': false.
From what I read in this answer the disabling of Turbolinks on certain links was precisely what I needed in order to entirely reload my JavaScript, so I went to the pagination links that sent requests changing parameters (such as page) and simply added 'data-turbolinks': false to it.
现在没有多余的AJAX调用了，因为链接现在仅呈现整个HTML，而不是通过Turbolinks.
Now there are no extra AJAX calls because the links now just render the entire HTML, instead of going through Turbolinks.
这篇关于如何在Rails上启用Turbolink的情况下通过AJAX正确渲染部分图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
