I'm writing an app in Rails 4.2.2. I'm using the filterrific gem for search/sort in my views. I have will_paginate in my list partial:
<div>
<%= page_entries_info @work_items, model: 'work items' %>
</div>
<%= will_paginate %>
<div id="filterrific_results">
<div>
</div>
<table class="table table-bordered table-hover work_item_list_table">
<tr>
<th>Phone Number</th>
<th>Customer Name</th>
<th>Twitter</th>
<th>Account number</th>
<th>Notes</th>
<th>Age</th>
</tr>
<% work_items.each do |work_item| %>
<tr>
<td><%= link_to work_item.phone, work_item_path(work_item)%></td>
<td><%= work_item.customer_name %></td>
<td><%= work_item.twitter %></td>
<td><%= work_item.account %></td>
<td><%= truncate(work_item.notes, length: 300, separator: ' ') %></td>
<td><%= time_ago_in_words(work_item.created_at) %> old, submitted at:<br />
<%= work_item.created_at.strftime("%I:%M%p on %A, %B %e %Y") %></td>
</tr>
<% end %>
</table>
</div>
<%= will_paginate %>
Whenever I change a filter option and the list is refreshed, my pagination is double-rendered:
https://i.sstatic.net/IrlHW.jpg
My index.js.erb and work_items_controller.rb are as follows, taken more or less directly from the filterrific example app (in which they also use the will_paginate gem for pagination with no such issues):
<% js = escape_javascript(
"render(partial: 'work_items/list', locals: { work_items: @work_items })
) %>
$("#filterrific_results").html("<%= js %>");
and
def index
@filterrific = initialize_filterrific(
WorkItem,
params[:filterrific],
select_options: {
sorted_by: WorkItem.options_for_sorted_by,
completion_status: WorkItem.options_for_completion_status,
needs_contact: WorkItem.options_for_needs_contact
},
persistence_id: 'shared_key',
) or return
@work_items = @filterrific.find.page(params[:page])
respond_to do |format|
format.html
format.js
end
end
and my index.html.erb is as follows:
<% provide(:title, "All work items") %>
<h1>All work items</h1>
<div class="row">
<div class="well">
<%= form_for_filterrific @filterrific, html: { class: "form-inline" } do |f| %>
<div class="form-group">
<%= f.label :search, class: "sr-only" %>
<%= f.text_field(:search_query, class: 'form-control filterrific-periodically-observed work-item-search-box', placeholder: "Search") %>
</div>
<div class="form-group">
<%= f.label :sorted_by %>
<%= f.select(:sorted_by, @filterrific.select_options[:sorted_by], {}, class: 'form-control' ) %>
</div>
<div class="form-group">
<%= f.label :status %>
<%= f.select(:completion_status, @filterrific.select_options[:completion_status],
{ include_blank: "All" }, class: 'form-control') %>
</div>
<div class="form-group">
<%= f.label :needs_contact %>
<%= f.select(:needs_contact, @filterrific.select_options[:needs_contact],
{ include_blank: "All" }, class: 'form-control') %>
</div>
<div class="form-group">
<%= link_to('Reset filters', reset_filterrific_url, class: "btn btn-default") %>
</div>
<%= render_filterrific_spinner %>
<% end %>
</div>
</div>
<div class="row">
<div class="well">
<%= render partial: 'work_items/list', locals: { work_items: @work_items } %>
</div>
</div>
It happens regardless of if I have two will_paginates in my view or not. If I put will_paginate outside of the partial, it isn't refreshed when the AJAX refresh hits. Any ideas on how to eliminate this?
I found the problem! My pagination was outside of my #filterrific-results div, and thus wasn't being refreshed properly by index.js.erb.