使用 Rails ajax 推送状态 [英] pushState with Rails ajax
问题描述
我有一个索引操作页面，显示了用 Kaminari 分页的项目列表，我向它们添加了 ajax 功能，现在我正在尝试使用 pushState 来获取适合的 URL.
我的问题是，当我的分页链接通过以下方式完成时，如何让 URL 传递给 pushState 方法:
<%= paginate @coasters, remote: true %>和javascript视图如下:
$('.grid').html('<%= escape_javascript render(@coasters) %>');$('.pagination').html('<%=escape_javascript(paginate(@coasters, remote: true).to_s) %>');我需要以某种方式让 URL 作为 pushstate 的第三个参数从我读过的内容中传递?
更新:
我已将其更改为以下内容:
$(document).ready(function() {$(document).on('click', '.pagination a[data-remote=true]', function(e) {history.pushState({}, '', $(this).attr('href'));});$(window).on('popstate', function () {$('.grid').html('<%= escape_javascript render(@coasters) %>');$('.pagination').html('<%=escape_javascript(paginate(@coasters, remote: true).to_s) %>');});});$('.grid').html('<%= escape_javascript render(@coasters) %>');$('.pagination').html('<%=escape_javascript(paginate(@coasters, remote: true).to_s) %>');所以我认为我的代码现在通过自己捕获分页远程真实链接上的点击来绕过 rails jQuery UJS 并且 URL 有点工作.
网址似乎有时会更新.后退按钮也失效了.
有什么想法我哪里出错了吗?
更新 2:
我将我的一部分 javascript 移动到我的主页 javascript 而不是 javascript 视图:
$(document).on('click', '.pagination a[data-remote=true]', function(e) {history.pushState(null, '', $(this).attr('href'));});$(window).on('popstate', function () {console.log('popState 开始');$('.grid').html('<%= escape_javascript render(@coasters) %>');$('.pagination').html('<%=escape_javascript(paginate(@coasters, remote: true).to_s) %>');});删除 popstate 内容后，上面的代码在单击链接时完美地更新了 URL，但是当我将 popState 内容添加回 postate 时，只要我进行页面刷新以进行测试并且我的网格区域被替换为以下行的文本输出是我的页面:
$('.grid').html('<%= escape_javascript render(@coasters) %>');$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s)如何让 popstate 正常工作?
我遇到了类似的情况，我就是这样解决的.我不确定这是否适用于 Kaminari，因为我不知道 Kaminari 是如何工作的.
#index.html.erb<div class="grid"><%=渲染(@coasters)%><div class="分页"><%= paginate @coasters, remote: true %>
--
#index.js.erb$('.grid').html('<%= escape_javascript render(@coasters) %>');$('.pagination').html('<%=escape_javascript(paginate(@coasters, remote: true).to_s) %>');在分页时，由于 data-remote 已启用，它们将仅呈现 index.js.erb.
在我的 JavaScript 中
$(document).on('click', '.pagination a[data-remote=true]', function(e) {history.pushState({}, '', $(this).attr('href'));});$(window).on('popstate', function () {$.get(document.location.href)});点击分页链接，data-remote 将处理ajax请求并渲染index.js.erb
但是在点击浏览器的后退按钮时，popstate 事件将被触发，浏览器中的当前 url 将是历史链接.所以我们用 $.get(document.location.href) 用那个 url 触发另一个 ajax 请求.这与在分页中单击上一个的效果相同.
I have an index action page showing a list of items with are paginated with Kaminari and I have added ajax functionality to them and now am trying to get the URL to fit in by using pushState.
My question is how do I get the URL to pass to the pushState method when my pagination links are done via:
<%= paginate @coasters, remote: true %>
and the javascript view is as follows:
$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');
I need to somehow get the URL to pass as the 3rd argument of pushstate from what I have read?
UPDATE:
I've changed it to the following:
$(document).ready(function() {
$(document).on('click', '.pagination a[data-remote=true]', function(e) {
history.pushState({}, '', $(this).attr('href'));
});
$(window).on('popstate', function () {
$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');
});
});
$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');
So I think my code now bypasses the rails jQuery UJS by capturing the click on the pagination remote true link myself and the URL is sort of working.
It seems like the URL sometimes updates. The back button also fails.
Any ideas where I am going wrong?
UPDATE 2:
I moved a chunk of my javascript to my main pages javascript rather than the javascript view:
$(document).on('click', '.pagination a[data-remote=true]', function(e) {
history.pushState(null, '', $(this).attr('href'));
});
$(window).on('popstate', function () {
console.log('popState started');
$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');
});
With the popstate stuff removed the above codeupdates the URL perfectly when the links are clicked but when I add the popState stuff back in the postate is called as soon as I do a page refresh to test and my grid area gets replaced with a text output of the following line son my page:
$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s)
How can I get the popstate to work correctly?
I was in a similar situation and this is how I solved it. I am not sure whether this will work with Kaminari since I have no idea, how kaminari works.
#index.html.erb
<div class="grid">
<%= render(@coasters) %>
</div>
<div class="pagination">
<%= paginate @coasters, remote: true %>
</div>
--
#index.js.erb
$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');
On pagination, since data-remote is enabled they will render index.js.erb only.
In my JavaScript
$(document).on('click', '.pagination a[data-remote=true]', function(e) {
history.pushState({}, '', $(this).attr('href'));
});
$(window).on('popstate', function () {
$.get(document.location.href)
});
On clicking on the pagination links, data-remote will be handle the ajax request and render index.js.erb
But on clicking the back button of browser the popstate event will be fired and current url in the browser will be link from history. SO we fire another ajax request with that url with $.get(document.location.href). This will have the same effect of clicking on the previous in pagination.
这篇关于使用 Rails ajax 推送状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
