Introduction: I'm currently working on a Ruby on Rails project and using ajax to load reviews. A review contains an image, when clicked it is shown with a bigger size on an overlay. It also has a clickable icon that displays an overlay with a form.
Problem: The first three reviews (Not loaded with AJAX) work as desired, but when I click "more" to load more reviews via AJAX, the reviews get loaded with the icon and it's respective image, but overlays are not displayed on click
Note: After the AJAX call the first three reviews still display the overlay. I've read that foundation seems to be the problem wich is solved with rebinding the events, but it works with older versions of foundation. I'm using the latest version 6.3
gems
gem 'rails', '4.2.6'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'foundation-rails'
gem 'will_paginate', '~> 3.1', '>= 3.1.5'
Home.html.erb
<div id="the-reviews" class="medium-push-2">
<% @reviews.each do |review| %>
<%= render 'reviews/review', review: review %>
<% end %>
</div>
<% if not(@reviews.empty?) and @reviews.next_page %>
<div class="row">
<div id="infinite-scrolling-home" class="space small-12 medium-6 medium-push-1 float-left columns">
<%= will_paginate @reviews %>
</div>
</div>
<% end %>
<div class="row">
<div class="small-12 columns">
<div id="load_more_reviews" class="space button">More</div>
</div>
</div>
<%= render 'reviews/review', review: review %>
<div class="row">
<div id="review-item" class="small-12 medium-6 medium-push-1">
<div class="upper-pad row">
<div class="small-4 columns">
<%= avatar_profile_link review.user, "medium", class: 'circle-picture' %>
</div>
<div id="who-review" class="small-8 small-pull-1 large-pull-2 text-center columns">
<h6><%= review.user.first_name %></h6>
<p>Reviewed</p>
<% if review.artist.present? %>
<h6 class="truncate"><%= review.artist.name %></h6>
<% else %>
<h6 class="truncate"><%= review.email %></h6>
<% end %>
</div>
</div>
<div id="review-content" class="under-pad b-border row">
<div class="small-12 columns">
<%= render 'star_rating', review: review %>
</div>
<div class="small-12 medium-8 columns">
<h6><%= review.title %></h6>
<p><%= review.comment%></p>
</div>
<div class="space small-12 medium-4 columns">
<%= image_tag review.image.url(:thumb), class: "review-image" %>
</div>
<div class="reveal" id="flag-overlay-<%= review.id %>" data-reveal>
<%= render template: 'flags/_form', locals: { review_id: review.id } %>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="small-12 text-center columns">
<i data-open="flag-overlay-<%= review.id %>" class="fa fa-flag fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
Home.js.erb
$(document).ready( function() {
$('#the-reviews').append('<%= j render @reviews %>');
<% if @reviews.next_page %>
$('.pagination').replaceWith('<%= j will_paginate @reviews %>');
$('.pagination').hide();
<% else %>
$('.pagination, #load_more_reviews').remove();
<% end %>
});
Home.coffee
callInfiniteScroll = ->
if $('#infinite-scrolling-home').size() > 0
$('.pagination').hide()
loading_posts = false
$('#load_more_reviews').show()
$('#load_more_reviews').on 'click', ->
$this = $(this)
$this.html('<i class="fa fa-spinner fa-pulse" aria-hidden="true"></i>')
return
$('#load_more_reviews').bindWithDelay 'click', ->
unless loading_posts
loading_posts = true
more_posts_url = $('.pagination a[rel="next"]').attr('href')
$this = $(this)
$this.html('<i class="fa fa-spinner fa-pulse" aria-hidden="true"></i>')
$.getScript more_posts_url, ->
$this.text('More').removeClass('disabled') if $this
loading_posts = false
return
, 1000
$(document).on 'turbolinks:load', callInfiniteScroll $(document).ready callInfiniteScroll