will_paginate pagination is rendered twice on AJAX refresh

Question

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?

Answer 1

I found the problem! My pagination was outside of my #filterrific-results div, and thus wasn't being refreshed properly by index.js.erb.