Rails 4：带JQuery&；AJAX在a"；“加载更多”；按钮

我有一个想法的集合（你可以把它们想象成帖子），我希望最初在我的索引页面上显示6个，然后每当用户点击“加载更多”按钮时再加载6个。这是我的密码：

ideas\u controller.rb

：（索引操作）

创意索引视图：

.ordered-ideas
  = render @ideas
= link_to_next_page @ideas, 'Load More', :remote => true, :id =>"load_more_link"

\u idea.html.haml

（部分）：

index.js.erb

：

$('.ordered-ideas').append("<%=j render @ideas %>");

$（'.ordered ideas'）。追加（“”）；

---

然而，当我点击“加载更多”时，什么都没有发生。。。我需要补充什么？谢谢。

您需要的第一件事是分页，因为您还没有提到您正在使用的库。我将演示如何使用

步骤1：将

gem添加到您的gem文件并运行bundle。
步骤2：使用分页：
步骤3：视图集成：
步骤4：无限滚动
在javascripts目录中创建一个新文件
pagination.js.coffee

jQuery ->
  if $('#infinite-scrolling').size() > 0
    $(window).on 'scroll', ->
      more_ideas_url = $('.pagination .next_page a').attr('href')
        if more_posts_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
            $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />')
            $.getScript more_ideas_url
        return
      return 

如果你在这里之前做的一切都正确，你的“加载更多”应该是有效的。如果没有，则用代码和错误发布。所以我们可以进一步帮助您。
谢谢。然而，上面的代码似乎是无限滚动的，当用户滚动到页面底部时加载更多的想法——我只是想实现一个“加载更多”按钮，我对如何修改上述代码感到有点困惑。单击“加载更多”按钮而不是
$（窗口）修改jquery代码以加载更多想法。在“滚动”上

$('.ordered-ideas').append("<%=j render @ideas %>");

@ideas = Idea.paginate(page: params[:page], per_page: 6).order(created_at: :desc)
respond_to do |format|
  format.html
  format.js
end

<div id="ordered-ideas">
  <%= render @ideas %>
</div>

<div id="infinite-scrolling">
  <%= will_paginate @ideas %>
</div>

%ul{ :class => 'span4' }
  %a{ :href => idea_path(idea.id), :class => 'thumbnail', :id => "idea_#{idea.id}" }
    .idea-concept-index
      = idea.concept

    .idea-description-index
      = idea.description
    %hr

    .idea-index-icons
      .idea-index-teams
        %i{ :class => 'fa fa-wrench' }
        = idea.teams.count
        teams

      .idea-index-like
        %i{ :class => 'fa fa-heart pink' }
        = idea.likes.count 
        likes

jQuery ->
  if $('#infinite-scrolling').size() > 0
    $(window).on 'scroll', ->
      more_ideas_url = $('.pagination .next_page a').attr('href')
        if more_posts_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
            $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />')
            $.getScript more_ideas_url
        return
      return 

$('#ordered-ideas').append('<%= j render @ideas %>');
<% if @ideas.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate @ideas %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();