Question

我已经按照本教程：Rails - load more results using jquery ajax但不确定我在哪里犯了错误，或者教程中的某些内容是错误的。

修改 ~~当我点击“加载更多”时：ajax loader gif没有出现，接下来的3个类别没有出现在当前3个类别下面（属于该类别的文章）。~~

当我点击“加载更多”时：ajax加载程序gif确实出现，接下来的3个类别会被渲染。但是，它们覆盖当前类别，而不是添加到当前类别之下。

类别/ index.html.erb

<div class = "container">
  <%= render @categories %>
</div>

<div class="load-more-container">
    <%= image_tag "ajax-loader.gif", style: "display:none;", class: "loading-gif" %>
    <%= link_to "Load More", categories_path, class: "load-more" %>
</div>

<script>
  $('.carousel').carousel({
    interval: false
}); 
</script>

_category.html.erb

<div class="category" data-id="<%= category.id %>">
  <h3 class= "padding-bottom-20"><%= link_to category.name, category_path(category) %></h3>
  <% div_id = "carousel_slider_#{category.id}" -%>
    <div id="<%= div_id -%>", class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active">
          <div class="carousel-content">
            <%= render 'article', obj: category.articles.order("impressions_count DESC").limit(3) %>
          </div>
        </div>
        <div class="item">
          <div class="carousel-content">
            <%= render 'article', obj: category.articles.order("impressions_count DESC").limit(3).offset(4) %>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#<%= div_id -%>" + "#{category.name}" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#<%= div_id -%>" + "#{category.name}" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
</div>

类别控制器

class CategoriesController < ApplicationController
before_action :authenticate_user!

  def index
    if params[:id]
      @categories = Category.order('created_at DESC').where('id < ?', params[:id]).limit(3)
    else
      @categories = Category.order('created_at DESC').limit(3)
    end
    respond_to do |format|
      format.html
      format.js
    end
  end

end

资产/ Javascript角/ category.js

$(document).ready(function () {
    $('a.load-more').click(function (e) {
        e.preventDefault();
        $('.load-more').hide();
        $('.loading-gif').show();

        var last_id = $('.category').last().attr('data-id');

        $.ajax({

            type: "GET",
            url: $(this).attr('href'),
            data: {
                id: last_id
            },
            dataType: "script",

            success: function () {
                $('.loading-gif').hide();
                $('.load-more').show();
            }
        });

    });
});

类别/ index.js.erb的

$('.container').append('<%= escape_javascript(render(:partial => @categories)) %>')

Answer 1

将index.html.erb更改为

<div id="category">
  <%= render @categories %>
</div>

index.js.erb的

$('#category').append('<%= escape_javascript(render(partial: @categories)) %>')

Gif for Load更多不能在我的Rails应用程序中使用Ajax和jQuery显示

1 个答案: