pushState with Rails ajax
我有一个索引操作页面,显示了与Kaminari一起分页的项目列表,我已经为他们添加了ajaxfunction,现在我试图通过使用pushState来获取适合的URL。
我的问题是当我的分页链接通过以下方式完成时,如何将URL传递给pushState方法:
和javascript视图如下:
$('.grid').html(''); $('.pagination').html('');
我需要以某种方式获取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(''); $('.pagination').html(''); }); }); $('.grid').html(''); $('.pagination').html('');
所以我认为我的代码现在通过捕获我自己的分页远程真实链接上的点击来绕过rails jQuery UJS,并且URL有点工作。
似乎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 started'); $('.grid').html(''); $('.pagination').html(''); });
删除了popstate的东西,上面的代码更新了链接点击时的URL,但是当我在页面刷新测试时我的网格区域被替换为文本输出以下行儿子我的页面:
$('.grid').html(''); $('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s)
如何让popstate正常工作?
我处于类似的情况,这就是我解决它的方式。 我不确定这是否适用于Kaminari因为我不知道kaminari如何工作。
#index.html.erb <%= render(@coasters) %> <%= 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请求。 这与点击前一个分页具有相同的效果。
- Google Maps For Rails – 仅在搜索结果发生变化时通过ajax更新标记
- 如何在AJAX中将RecordRTC blob文件上传到Rails回形针
- “警告:无法validationCSRF令牌真实性”错误 – 使用Devise的CORS和:token_authenticatable
- 将Ajax POST请求的参数格式化为Rails控制器 – 用于jQuery-UI可排序列表
- 部分Javascript(Ruby on Rails)
- rails link_to remote with params
- Rails 3 rateable模型 – 如何创建ajax评级?
- 检查3个旧复选框后如何调用3个新复选框?
- 是否有一个创建类似Twitter的追随者的gem,或者是一个微不足道的:has_many?