CODEWITHSUNDEEP
javascriptruby-on-railsrubyajax
Mario Lorenzo
Mario Lorenzo

Reputation: 19

Hide Load More buttons when all items have been rendered in Ruby on Rails

I'm currently trying to implement the Load More button in Ruby on Rails. I've managed to implement it. However, the Load More button still appears even though there is no more photos left to be rendered.

Here are the lists of codes: index.html.erb

<div class = 'container'>
        <div class = 'section-header'>
            <h2> Let's Rewind! </h2>
        </div>
        <div class='row'>
            <div class = 'container'>
                <div class='cust-cont'>
                    <%= render @scroll_photos %>
                </div>
            </div>
        </div>
        <div class="load-more-container">
            <%= image_tag "ajax-loader.gif", style: "display:none;", class: "loading-gif" %>
            <%= link_to "Load More", scroll_photos_path, class: "load-more" %>
        </div>
    </div>

_scroll_photo.html.erb

<div class="col-lg-12 col-md-4 col-xs-12">
  <div class="image-box-4-3">
        <div class="record" data-year="<%= scroll_photo.year %>">
            <div class="image-content">
                <%= image_tag(scroll_photo.image_link, width: "100%") %>
            </div>
        </div>
    </div>
  </div>

and the controller

if params[:year]
      # get all records with id less than 'our last id'
      # and limit the results to 5
      @scroll_photos = ScrollPhoto.where('year < ?', params[:year]).limit(2)
    else
      @scroll_photos = ScrollPhoto.limit(2)
    end
    respond_to do |format|
      format.html
      format.js
    end

the javascript

$(document).ready(function(){
    // when the load more link is clicked
    $('a.load-more').click(function(e){

      // prevent the default click action
      e.preventDefault();

          // hide load more link
          $('.load-more').hide();

          // show loading gif
          $('.loading-gif').show();

      // get the last id and save it in a variable 'last-id'
          var last_year = $('.record').last().attr('data-year');

          // make an ajax call passing along our last user id
          $.ajax({

            // make a get request to the server
              type: "GET",
              // get the url from the href attribute of our link
              url: $(this).attr('year'),
              // send the last id to our rails app
              data: { year: last_year },
              // the response will be a script
              dataType: "script",

              // upon success 
              success: function(){
                  // hide the loading gif
                  $('.loading-gif').hide();
                  // show our load more link
                  $('.load-more').show();
              }

          });

    });
  });

index.js.erb

$('.cust-cont').append('<%= escape_javascript(render(:partial => @scroll_photos)) %>')

Upvotes: 0

Views: 376

Answers (1)

quyetdc
quyetdc

Reputation: 1585

You can hide the load more part when the controller action return empty @scroll_photos

# in your javascript file

<% if @scroll_photos.empty? %>
  $('.load-more-container').hide()
<% else %>
  $('.cust-cont').append('<%= escape_javascript(render(:partial => @scroll_photos)) %>')
<% end %>

Upvotes: 1

Related Questions