繁体   English   中英

带有will_paginate的jQuery Endless页面在Rails中不起作用

[英]jQuery Endless page with will_paginate not working in Rails

我正在尝试实现Railscasts第114集中显示的无尽页面功能。分页效果很好,但是无尽页面功能根本不会触发。 我没有看到任何错误; 只是分页,就好像我没有添加无尽的页面javascript。 我的代码:

活动控制者

class ActivitiesController < ApplicationController
    before_filter :authenticate_user!
  def index
    @activities = PublicActivity::Activity.order("created_at DESC").where(owner_type: "User", owner_id: current_user.followed_users.map {|u| u.id}).page(params[:page]).per_page(15)
    @post = current_user.posts.build

     respond_to do |format|
      format.html
      format.json
      format.js 
    end
  end
end

activities.js.coffee

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
        $('.pagination').text("Loading more activities...")
        $.getScript(url)
    $(window).scroll()

index.js.erb的

$('#activities').append('<%= j render ('shared/activities') %>');
<% if @activities.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate('shared/activities') %>');
<% else %>
  $('.pagination').remove();
<% end %>
<% sleep 1 %>

共享/ _activities.html.erb

<div class="activities">
<% @activities.each do |activity| %>
<code>
<% end %>
<%= will_paginate @activities %>
</div>

问题一定是与javascript有关,但我无法弄清楚。 关于什么可能导致问题的任何想法?

谢谢! -b

我设法在Rails 4中没有使用“ index.js.erb”文件来完成此操作。只需添加以下coffeescript:

$(window).on 'scroll', ->
  if $('.pagination').length
    @url = $('.pagination .next_page').attr('href')
    if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
      $('.pagination').remove()
      $('#articles').append('<div>')
      $('#articles div').last().load @url+' #articles', ->
          if $('.next_page.disabled').length
            $('.pagination').remove()

这将加载下一页,然后在新加载的页面上使用分页,直到没有其他下一页。 只需用脚本中容器的ID替换“ #articles”即可。 跳过index.js.erb和response_to爵士乐。

这是我代码中的相关文件,在其中我有无数的页面进行分页。 希望您可以从下面找出您的特定解决方案:

我的index.js.erb文件

 $('.carousel').append("<%= j render ('shared/recentlyadded') %>");
<% if @recently_added_video.next_page %>
  $('.pagination').replaceWith("<%= j will_paginate(@recently_added_video) %>");
<% else %>
  $('.pagination').remove();
<% end %>

我的index.html.erb文件

  <div class="carousel"><%= render partial: 'shared/recentlyadded' %></div>
  <%= will_paginate @recently_added_video %>

我的_recentlyadded.html.erb文件

 <ul class="jcarousel-skin-recent">
    <% @recently_added_video.each do |v| %>
      <li>
      <code>
      </li>
    <% end %> 
  </ul> 

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('.jcarousel-skin-recent').jcarousel({
            wrap:'both',
            animation:'slow'
        });
    });
</script>

我的JavaScript文件

jQuery ->

  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 225
        $('.pagination').text("...")
        $.getScript(url)
    $(window).scroll()

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM