Gif for Load在我的Rails應用程序中更多不顯示Ajax和jQuery

我按照本教程：Rails - load more results using jquery ajax，但不知道我犯了什麼錯誤或者教程中的內容是錯誤的。Gif for Load在我的Rails應用程序中更多不顯示Ajax和jQuery

編輯： ~~當我點擊「加載更多」：AJAX載入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)) %>')

來源

2017-09-13 doyz

如果您投票結束，至少要解釋原因。這位新用戶付出了足夠的努力。嘗試通過提問或幫助進行相關編輯來增加價值，而不僅僅是關閉新用戶。 – JGallardo

網絡選項卡中的任何提示？ –

@SebastiánPalma我已經檢查並且接下來的3個類別正在呈現，但似乎被覆蓋而不是被附加到下面。 – doyz

變化index.html.erb到

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

index.js .erb

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

來源

2017-09-13 17:26:06 doyz

Gif for Load在我的Rails應用程序中更多不顯示Ajax和jQuery

回答

相關問題