pushState使用Rails的AJAX [英] pushState with Rails ajax

问题描述

我有显示与分页都与雷的项目列表索引操作页面，我有添加了Ajax功能，他们现在想获得的URL使用pushState来格格不入。

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.

我的问题是我怎么传递给pushState方法的URL时，我的分页链接是通过完成的：

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 %>

和javascript的观点如下：

and the javascript view is as follows:

$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');

我需要以某种方式获得URL传递的pushstate从我看过的第三个参数？

I need to somehow get the URL to pass as the 3rd argument of pushstate from what I have read?

更新：

我已经改成了以下内容：

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) %>');

所以，我认为我的code现在绕过栏杆的jQuery UJS通过捕捉在分页点击远程真实链接自己的网址之类的工作。

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.

好像有时URL更新。后退按钮也会失败。

It seems like the URL sometimes updates. The back button also fails.

在任何地方我错了的想法？

Any ideas where I am going wrong?

更新2：

我把我的JavaScript的一大块给我的主要页面的JavaScript而不是JavaScript的观点：

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) %>');
  });

随着popstate的东西去掉上面的codeupdates网址完美，当链接被点击，但是当我添加popState的东西早在postate，只要我做一个刷新页面被调用，以测试和我的网格区域变

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)

我怎样才能获得popstate正常工作？

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) %>');

在分页，因为数据远程已启用，他们将呈现 index.js.erb的而已。

On pagination, since data-remote is enabled they will render index.js.erb only.

在我的JavaScript

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)
  });

在点击分页链接，数据远程将处理Ajax请求，并呈现 index.js.erb的

On clicking on the pagination links, data-remote will be handle the ajax request and render index.js.erb

但是在点击浏览器的后退按钮的 popstate 事件将被解雇，当前的URL在浏览器将从链接记录。所以我们火与URL以 $另一个Ajax请求。得到（document.location.href）。这将有点击previous在分页的同样的效果。

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.

这篇关于pushState使用Rails的AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！