0

RailsとKaminariを使用しており、LocationsandPostsの下のコメントに無限のスクロールを実装しようとしています。始めは正しかったのですが、下にスクロールすると、同じコメントが何度も読み込まれます。コメントが正しく読み込まれるようにするにはどうすればよいですか？

これが私のlocations/show.js.erbです

  1 $('#comments').append('<%= j render(@comments) %>');

これが私の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 &raquo;</a>
</li>

    </ul>
  </div>
4

3 に答える 3

1

.next_page リンクは変更されていません。リンクはwhatever.com/?page=2です。スクロールしているときは、同じページをリクエストしているだけです。リンクのページ番号を更新するために JavaScript が必要になるか、そのような DOM を参照しないようにする必要があります。

ページネーターは次の方法で更新できます。

$('.pagination').html('<%= escape_javascript(paginate(@comments)) %>');

カミナリには、このための「ハウツー」があります: How-To:-Create-Infinite-Scrolling-with-jQuery

于 2013-02-16T16:01:04.160 に答える
1

のコールバック内で、の$.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;
                   });
              });
         });
于 2013-02-16T16:53:35.667 に答える
0

わかりました、私は問題が何であるかを見つけました。助けてくれた人たちに感謝します。これが機能したコードです。（コメントが気になる場合は申し訳ありませんが、誰かが私を修正したい場合、または将来誰かを助ける場合に備えて、コメントをここに残すことにしました）。

location.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を非表示にする方法をまだ見つけなければならないので、誰かがそれを手伝いたいなら、それは素晴らしいことです.

于 2013-02-19T23:41:58.637 に答える