jQuery加载更多按钮，然后在Rails App中无限滚动 [英] Jquery Load More Button and then Infinite Scrolling in Rails App

问题描述

我使用这篇文章构建了一个加载更多按钮，该按钮在出现后会重新出现如果有@ photos.next_page，则将使用will_paginate加载更多照片.相反，我希望有一个加载更多"按钮，并使该按钮过渡到无限滚动，就像Instagram.

I used this article to build a load more button that reappears after loading more photos with will_paginate if there is a @photos.next_page. Instead, I want there to be a "load more" button and for that to transition into infinite scrolling, just like 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/除非

进入脚本.

into the script using if/else/unless while removing the #load_more_photos btn.

请编辑以下脚本以实现上述目标:

Please edit the scripts below to achieve the above stated goal:

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

And another version of the code, both do the same, appending page_3 on scroll over and over again

$(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"

推荐答案

我借助本主题

这篇关于jQuery加载更多按钮，然后在Rails App中无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！