[英]Endless page loads same records over and over again
我正在使用Rails和Kaminari,並試圖在位置和帖子下面的評論上實現無休止的滾動。 我得到了正確的權利,但當我向下滾動時,它會一遍又一遍地加載相同的注釋。 如何使它正確加載評論?
這是我的位置/ show.js.erb
1 $('#comments').append('<%= j render(@comments) %>');
這是我的評論.js
5 jQuery ->
6 $(window).scroll ->
7 if $(window).scrollTop() > $(document).height() - $(window).height() - 200
8 $.getScript($('.pagination .next_page a').attr('href'))
我的評論控制器顯示行動
18 def show
19 @title = @location.name
20 @comments = @location.comments.order("created_at desc").page(params[:page]).per(35)
21 @commentable = @location
22 @comment = @location.comments.build
23 respond_to do |format|
24 format.html
25 format.js
26 end
27 end
編輯:這是分頁html源
<div class="pagination">
<ul>
<li class="active">
<a href="#">1</a>
</li>
<li class="">
<a href="/locations/1?page=2" rel="next">2</a>
</li>
<li class="">
<a href="/locations/1?page=3">3</a>
</li>
<li class="">
<a href="/locations/1?page=4">4</a>
</li>
<li class="">
<a href="/locations/1?page=5">5</a>
</li>
<li>
<a href="/locations/1?page=5">Last »</a>
</li>
</ul>
</div>
.next_page鏈接沒有變化。 這個鏈接就是這里的任何內容。 當你滾動時,它只是在請求同一頁面。 您需要使用javascript來更新鏈接中的頁碼,或者不要像這樣引用DOM。
您可以使用以下命令更新分頁器:
$('.pagination').html('<%= escape_javascript(paginate(@comments)) %>');
Kaminari有一個'How To'為此: How-To:-Create-Infinite-Scrolling-with-jQuery
在$.getScript
回調中,你可以增加next
頁碼:
jQuery ->
$(window).scroll ->
if $(window).scrollTop() > $(document).height() - $(window).height() - 200
var $next=$('.pagination .next_page a')
$.getScript($next.attr('href'), function(){
/* script has loaded*/
$next.attr('href', function(i, currHref){
return currHref.replace(/(?!page\=)(\d)/, function(match){
return parseInt(match,10)+1;
});
});
});
好的,我發現了問題所在。 感謝幫助的人,非常感謝。 這是有效的代碼。 (對不起,如果評論困擾你,但我決定留在這里,以防有人想糾正我或以防他們將來幫助某人)。
locations.js.coffee
5 # Infinite scroll
6 jQuery ->
7 # it doesn't listen for the scroll unless there is location_comments class
8 if $('.location_comments').length
9 $(window).scroll ->
10 # finds anchor tag in pagination with rel attribute = 'next'
11 $next = $(".pagination a[rel='next']")
12 # sets url variable to the href value of that anchor tag
13 url = $($next).attr('href')
14 if url && $(window).scrollTop() > $(document).height() - $(window).height() - 200
15 # since this replaces whole pagination with this text, it prevents loading of too many records.
16 # This line ise immediatly followed by this getScript() wich triggers another operation on .pagination
17 $('.pagination').text 'Fetching more comments...'
18 # triggers /locations/show.js.erb
19 $.getScript(url)
20 $(window).scroll
位置/ show.js.erb
1 $('.location_comments').append('<%= j render @comments %>');
2 $('.pagination').replaceWith('<%= j paginate @comments %>');
3 /* Add code for removing pagination if the user is on last page */
評論控制器
9 def create
10 @comment = @commentable.comments.build(params[:comment])
11 @comment.user = current_user
12
13 respond_to do |format|
14 if @comment.save
15 format.html { redirect_to @commentable, :notice => 'Comment created' }
16 format.js
17 else
18 format.html { redirect_to @commentable, :alert => 'Comment not created' }
19 format.js
20 end
21 end
位置控制器
18 def show
19 @title = @location.name
20 @comments = @location.comments.order("created_at desc").page(params[:page]).per(35)
21 @commentable = @location
22 @comment = @location.comments.build
23 end
當用戶在最后一頁時,我仍然需要找出如何隱藏.pagination,所以如果有人想要幫助那就太棒了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.