在我的 Rails 应用程序中，用于加载更多内容的 Gif 未使用 Ajax 和 jQuery 显示

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

assets/javascripts/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)) %>')