Question

我使用this文章构建了一个加载更多按钮，如果有@ photos.next_page，则在使用will_paginate加载更多照片后重新显示该按钮。相反，我希望有一个＆＃34;加载更多＆＃34;按钮，以及转换为无限滚动的按钮，就像Instagram一样。

我尝试添加失败：

$(window).on 'scroll', ->
  url = $('.pagination .next_page a').attr('href')
    if $(window).scrollTop() > $(document).height() - $(window).height() - 60
       $.getScript url

在删除#load_more_photos btn时使用if / else /除非进入脚本。

请编辑以下脚本以达到上述目标：

**pagination.js.coffee**
jQuery ->
  if $('#infinite-scrolling').size() > 0
    $('.pagination').hide()
    loading_photos = false

$('#load_more_photos').show().click ->
    unless loading_photos
        loading_photos = true
        url = $('.pagination .next_page a').attr('href')
        $this = $(this)
        $this.html("Fetching more videos...").addClass('disabled')
        $.getScript url, ->
            $this.text('More posts').removeClass('disabled') if $this
            loading_photos = false
    return   

**show.js.erb**
$('#user-profile').append('<%= escape_javascript render :partial  => "users/profile"  %>');
  <% if @photos.next_page %>
    $('.pagination').replaceWith('<%= escape_javascript will_paginate(@photos) %>');
    $('.pagination').hide();
  <% else %>
    $('.pagination, #load_more_photos').remove();
  <% end %> 

**users.scss**
#load_more_photos {
  display: none;
  margin-bottom: 20px;
}

**views/users/show.html.erb**
<div id="user-profile">
  <%= render :partial => "users/profile" %>
</div>

<div id="infinite-scrolling">
  <center><%= will_paginate @photos %></center>
</div>

<% if @photos.next_page %>
<div id="load_more_photos" class="btn btn-primary btn-lg">
  Load More Photos
</div>
<% end %>

编辑：我正在努力让以下代码生效。但是，我现在遇到的问题是滚动会一遍又一遍地追加page_3。

$(document).on('page:change', function () {
  if($('#infinite-scrolling').size() > 0) {
    $('.pagination').hide();
    $('#load_more_photos').show();
    $('#load_more_photos').on('click', function() {
      var url = $('.pagination .next_page a').attr('href');
      $.getScript(url);
      $('#load_more_photos').hide();   
      $(window).on('scroll', function() {
        if($(window).scrollTop() > $(document).height() - $(window).height() - 60) {
        $.getScript(url)
      }
    });
    }); 
  }
});

另一个版本的代码，两者都做同样的事情，一遍又一遍地追加page_3

$(document).on('page:change', function () {
if (window.pagination_loading) {
    return;
  }
  if($('#infinite-scrolling').size() > 0) {
    $('.pagination').hide();
    $('#load_more_photos').show();
    $('#load_more_photos').on('click', function() {
      var url = $('.pagination .next_page a').attr('href');
      $.getScript(url);
      $('#load_more_photos').hide();   
      $(window).bind('scroll', function() {
        if($(window).scrollTop() > $(document).height() - $(window).height() - 60) {
        window.pagination_loading = true;
        $.getScript(url).always(function() {
            return window.pagination_loading = false;
        });
      }
    });
    }); 
  }
});

修改

Wtf is... "&_=1468801707048"  ??

heroku[router]: at=info method=GET path="/users/1?page=2&_=1468801707048"

Answer 1

我在这个主题Preventing duplicate execution with infinite scrolling：

的帮助下解决了这个问题

$(window).scroll(function() {
if ($('#paginator').length) {
    var url = $('#load_more').attr('href');
    if (url && $('#load_more').inView() && $.active == 0) {
        $.get(url, function(data) {
            $('#paginator').append('<div class="spinner"></div>');
            $.getScript(url);
        });
    }
}
});

Jquery在Rails应用程序中加载更多按钮然后无限滚动

1 个答案: