使用Rails 3和Jquery實現無限滾動

我試圖在我的項目上實現無限滾動。我正在使用Railscast #114 Endless Page和this的組合。使用Rails 3和Jquery實現無限滾動

除了奇怪的行爲，當我嘗試停止發送請求，當頁面到達其結尾時，一切正常。

到目前爲止，我有：

控制器：

def show 
    @title = Photoset.find(params[:id]).name 
    @photos = Photoset.find(params[:id]).photo.paginate(:page => params[:page], :per_page => 20) 
    respond_to do |format| 
     format.js 
     format.html 
    end 
end

Show.html.erb：

<% content_for :body_class, '' %> 
<%= render 'shared/header' %> 
<div id="photos_container"> 
    <div id="photos_header"> 
    <h2><%= @title %></h2> 
    </div> 
    <%= render :partial => 'photo', :collection => @photos %> 
</div> 
<%= render :partial => 'endless_scroll' %>

的Javascript（通過局部加載）：

<script type="text/javascript"> 
(function() { 
    var page = 1, 
    loading = false, 
    finish = false; 

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

    function finish() { 
    finish = true; 
    } 

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

    if(nearBottomOfPage() && !finish) { 
     loading=true; 
     page++; 
     $.ajax({ 
     url: '/photosets/<%= params[:id] %>?page=' + page, 
     type: 'get', 
     dataType: 'script', 
     success: function() { 
      loading=false; 
     } 
     }); 
    } 
    }); 
}()); 
</script>

秀.js.erb

$("#photos_container").append("<%= escape_javascript(render :partial => 'photo', :collection => @photos) %>"); 
<% if @photos.total_pages == params[:page].to_i() %> 
    page.call 'finish' 
<% end %>

正如你所看到的，在我的show.js.erb我有一個page.call指派忠實於finish變量。這停止了請求。

有線的事情是，它永遠不會加載最後一頁。當@photos.total_pages == params[:page].to_i()而不是隻調用finish函數並將該變量設置爲true時，它也會阻止$("#photos_container").append("<%= escape_javascript(render :partial => 'photo', :collection => @photos) %>");運行。

它向控制器發送請求，運行SQL但不附加最後一頁。

如果我將條件更改爲@photos.total_pages < params[:page].to_i()它可以工作，但會向不存在的頁面發送額外請求。

我很感激任何幫助我的實施。我不確定是否有更充足的（Rails）方法來實現這一點。

來源

2011-11-30 Gustavo

我不知道Rails的，但是一般不PARAMS [：page] .to_i（）一個從零開始的索引？所以如果params [：page] .to_i（）是例如5，那麼photos.total_pages將是6（第0-5頁）。 – Simon

您是否檢查過最後一頁上的'@ photos'變量？我認爲它不會追加任何內容，因爲收藏在最後一頁是空的。 'finish'變量不會被你粘貼的任何代碼使用，但我認爲這沒有關係。 – Draiken

在您的ajax調用中，您只有將加載設置爲false的成功方法。答案在哪裏？如果它沒有注入到DOM中，那麼變量不會被改變。 – Zefiryn

首先，你可以從局部渲染HTML時請求XHR類型：

def show 
    photoset = Photoset.includes(:photos).find(params[:id]) 
    @title = photoset.name 
    @photos = photoset.photo.paginate(:page => params[:page], :per_page => 20) 
    if request.xhr? 
    render '_photo', :layout => false 
    end 
end

然後使用Ajax調用：

$.ajax({ 
    url: '/photosets/<%= params[:id] %>?page=' + page, 
    type: 'get', 
    dataType: 'script', 
    success: function(response) { 
    $("#photos_container").append(response); 
    if (response == "") { 
     //stop calling endless scroll 
    } 
    }); 
});

來源

2012-08-07 14:08:20 Eru

使用Rails 3和Jquery實現無限滾動

回答

相關問題