无尽的页面路轨

时间:2012-06-16 18:41:45

标签: javascript jquery ruby-on-rails will-paginate jquery-masonry

大家好我有无尽的页面js代码工作得很好但是由于某种原因它只触发第二页。我对我发现的一些代码进行了一些更改,以满足我的需求,但现在不再继续加载项目,因为我的控制台记录状态,它会在第2页停止。这是我的代码,有人可以检查一下,告诉我为什么这不会触发?至于我的分页,我使用的是will_paginate gem,我得到了底部页面的链接,所以后面的es工作正常。提前谢谢。

编辑2:如果有人遇到我的问题,这是我的最终设置。

- content_for :scripts do
  :javascript
    (function() {
      var divContainer = $('#posts-container');
      var page = 1,
          loading = false;
      var current_url = divContainer.data('url') + '?page=';

      function nearBottomOfPage() {
        return $(window).scrollTop() >= $(document).height() - $(window).height() - 10;
      }

      $(window).scroll(function(){
        if (loading) {
          return;
        }

        if(nearBottomOfPage()) {
          loading=true;
          page++;
          $.ajax({
            url: current_url + page,
            type: 'get',
            dataType: 'script',
            success: function(html) {
              var $items = $(html).find('.item');
              jQuery(".content").append($items).masonry( 'appended', $items, true );
              $(".content").masonry('reload');
            },
            error: function() {
              console.log("Error")
            },
            complete: function() {
              loading = false;
            }
          });
        }
      });
    }());

编辑1:

我发现nearBottomOfPage()函数无法正常工作。它只会在第一次触发时再也不会返回true。为什么会这样?

1 个答案:

答案 0 :(得分:2)

我注意到的一件事是你将“正在加载”标志设置为true

if(nearBottomOfPage()) {
  loading=true;

但您从未将其设置回false。这意味着您的nearBottomOfPage()支票只会被触发一次。

尝试更新您的AJAX成功处理程序以重置loading

success: function(html) {
  var $items = $(html).find('.item');
  $(".content").append($items).masonry( 'appended', $items, true );
  $(".content").masonry('reload');
  console.log("Reloaded masonry");
  loading = false; // <----------------------------- This is sort of important.
}

您可能还想为AJAX添加错误处理程序。然后,您可以将loading = false;移至complete回调:

success: function(html) {
  // As you have it now...
},
error: function() {
  // Complain or something...
},
complete: function() {
  loading = false;
}