Question

我想制作两个加载更多按钮，用id或class等加载它们所连接的特定列表。到目前为止，我的代码填写列表不正确，例如当我点击view more complete - ＆GT;我的页面上的reservations_completed按钮会在名为list的其他.each / reservations_pending上加载自己的副本。即使有这些类/ id，也可以保持它们“分离”。

我认为问题是两个中的一个：

1）在它发送的http请求中，它使用了page = 2或者其他什么，所以我认为当按下任一按钮时complete和pending都被设置为该页面，导致问题正在发生。

2）另一个可能的问题可能是js.erb file我可能会调用附加错误的点击或者我现在不知道的任何事情，因为我尝试了许多组合并且没有让它工作，我的大脑需要一些帮助!!

现在，如果有另一种方式更容易或只是另一种方式来做这个时期，请告诉我告诉我的方式我学习这么多!!!

your_essays.html.erb：

<div id="content-load-more-completed">
  <%= render 'your_essays_completed', reservations_completed: @reservations_completed %>
  	</div>

<% unless @reservations_completed.current_page == @reservations_completed.total_pages %>
  <div class="view-more-completed" class="center" style="min-width:100%;" >
    <%= link_to('View More', url_for(page_completed: @reservations_completed.current_page + 1), remote: true, class: 'btn btn-back', style: 'min-width:100%;') %>
  </div>
<% end %>


<div id="content-load-more-expired">
		<%= render 'your_essays_expired', reservations_expired: @reservations_expired %>
		</div>

		<% unless @reservations_expired.current_page == @reservations_expired.total_pages %>
  <div class="view-more-expired" class="center" style="min-width:100%;" >
    <%= link_to('View More', url_for(page_expired: @reservations_expired.current_page + 1), remote: true, class: 'btn btn-back', style: 'min-width:100%;') %>
  </div>
<% end %>

your_essays.js.erb

$('.view-more-completed a').click(function (event) {
$('#content-load-more-completed').append("<%=j render 'your_essays_completed', reservations_completed: @reservations_completed, format: 'html' %>");
});
<% if @reservations_completed.current_page == @reservations_completed.total_pages %>
  $('.view-more-completed').remove();
<% else %>
  $('.view-more-completed a').attr('href', '<%= url_for(page_completed: @reservations_completed.current_page + 1) %>');
<% end %>

$('.view-more-expired a').click(function (event) {
$('#content-load-more-expired').append("<%=j render 'your_essays_expired', reservations_expired: @reservations_expired, format: 'html' %>");
});

<% if @reservations_expired.current_page == @reservations_expired.total_pages %>
  $('.view-more-expired').remove();
<% else %>
  $('.view-more-expired a').attr('href', '<%= url_for(page_expired: @reservations_expired.current_page + 1) %>');
<% end %>

Reservation_controller

def your_essays

    user = current_user
  @reservations = user.reservations.where("user_id = ?", current_user.id).where("status = ?", true)

  #pending
  @reservations_pending = user.reservations.where("turned_in = ?", false).where("completed = ?", false).where("due_date >= ?", DateTime.now).order(created_at: :desc).page(params[:page_pending]).per_page(3)

   @reservations_pending1 = user.reservations.where("turned_in = ?", false).where("completed = ?", false).where("due_date >= ?", DateTime.now).order(created_at: :desc)

  #completed

  @reservations_completed = user.reservations.where("turned_in = ?", true).where("completed_doc_updated_at <= due_date", true).order(created_at: :desc).page(params[:page_completed]).per_page(3)
  @reservations_completed1 = user.reservations.where("turned_in = ?", true).where("completed_doc_updated_at <= due_date", true).order(created_at: :desc)
  #expired
  @reservations_expired = user.reservations.where("due_date <= ?", DateTime.now).where("turned_in = ?", false).where("completed = ?", false).order(created_at: :desc).page(params[:page_expired]).per_page(3)
  @reservations_expired1 = user.reservations.where("due_date <= ?", DateTime.now).where("turned_in = ?", false).where("completed = ?", false).order(created_at: :desc)


end

负载more.js

//completed

$(function() {
  var content, isLoadingNextPage, lastLoadAt, loadNextPageAt, minTimeBetweenPages, viewMore;
  content = $('#content-load-more-completed');
  viewMore = $('.view-more-completed');
  isLoadingNextPage = false;
  lastLoadAt = null; 
  minTimeBetweenPages = 5000;
  return loadNextPageAt = 1000;


var nextPage;

nextPage = function() {
  var isLoadingNextPage, lastLoadAt, url;
  url = viewMore.find('.view-more-completed a').attr('href');
  if (isLoadingNextPage || !url) {
    return;
  }
  
  isLoadingNextPage = true;
  lastLoadAt = new Date();
  return $.ajax({
    url: url,
    method: 'GET',
    dataType: 'script',
    success: function() {
      
      isLoadingNextPage = false;
      return lastLoadAt = new Date();
    }
  });
};

viewMore.find('.view-more-completed a').click(function(e) {
  nextPage();
  return e.preventDefaults();
});


});



//expired 

$(function() {
  var content3, isLoadingNextPage3, lastLoadAt3, loadNextPageAt3, minTimeBetweenPages3, viewMore3;
  content3 = $('#content-load-more-expired');
  viewMore3 = $('.view-more-expired');
  isLoadingNextPage3 = false;
  lastLoadAt3 = null; 
  minTimeBetweenPages3 = 5000;
  return loadNextPageAt3 = 1000;


var nextPage3;

nextPage3 = function() {
  var isLoadingNextPage3, lastLoadAt3, url3;
  url3 = viewMore3.find('a').attr('href');
  if (isLoadingNextPage3 || !url3) {
    return;
  }
  
  isLoadingNextPage3 = true;
  lastLoadAt3 = new Date();
  return $.ajax({
    url: url3,
    method: 'GET',
    dataType: 'script',
    success: function() {
      
      isLoadingNextPage3 = false;
      return lastLoadAt3 = new Date();
    }
  });
};

viewMore3.find('a').click(function(e) {
  nextPage3();
  return e.preventDefaults();
});


});

如果知道我的completed和pending的部分内容是什么很重要的话，那么这里就是“让它保持简短”，其他的只是与pending相同。

_my_essays_completed.html.erb：

<% reservations_completed.each do |reservation| %>

<!-- content right here keepin it short -->

<% end %>

“加载更多按钮”无法正确使用两个单独的列表“.each”？

0 个答案: