Mag*_*led 5 javascript jquery ruby-on-rails will-paginate infinite-scroll
我按照这里的教程http://railsforbeginners.com/chapters/chapter-9-infinite-scroll/进行无限滚动.代码在本地运行良好,但是当我将其部署到prod时.分页链接(1 2 3 4)仍然显示,无限滚动不会触发.我也尝试添加这些文件但assets.rb没有成功
首先我正在使用Rails 4,我application.js看起来像这样
//= require jquery2
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui.min
//= require bootstrap-hover-dropdown.min
//= require bootstrap.min
//= require select2
//= require infinite_scroll
//= require turbolinks
Run Code Online (Sandbox Code Playgroud)
Controller action
respond_to do |format|
format.html
format.js { render "visitors/index" }
end
Run Code Online (Sandbox Code Playgroud)
index.js.erb
$('#my-articles').append('<%= j render @articles %>');
<% if @articles.next_page %>
$('.pagination').replaceWith('<%= j will_paginate @articles %>');
add_tweets();
<% else %>
$(window).off('scroll');
$('.pagination').remove();
<% end %>
function add_tweets(){
<% @articles.each do |article|%>
handle_open_modal("<%= article.id %>");
<%end%>
}
Run Code Online (Sandbox Code Playgroud)
这是我使用此参考文献所做的工作
我删除了涡轮链接及其所有参考
然后将其添加到index.html.erb无需使用jQuery $(document).on('ready
if ($('#infinite-scrolling').size() > 0){
$(window).on('scroll', function(){
var more_posts_url = $('.pagination .next_page a').attr('href')
heights = $(document).height() - $(window).height() - 500
if(more_posts_url && $(window).scrollTop() > heights){
$('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />')
$.getScript(more_posts_url)
}
});
}
Run Code Online (Sandbox Code Playgroud)
然后一切就*.js.erb开始工作了。
我试图避免删除涡轮链接,但已经尝试让它与它一起工作。
| 归档时间: |
|
| 查看次数: |
592 次 |
| 最近记录: |