select2 breaks with ajax/jquery on pagination

Question

I have a Rails 3.2.21 app which I use select2 for my dropdown menus and UI. In this view I'm doing a multi-select to pick different elements/objects in my view/form. When the initial controller view loads it's fine as you can see by the first picture. But when I click to a second page to paginate, the select2 is broken by the Ajax as you can see in the last picture.

Here is what my view looks like:

index.html.erb

<h3 class="offset3">5 most recent pages</h3>
<div class="row">
    <div class="span3"><div class="well" id="form"><%= render 'form' %></div></div>
<div class="span9"><div id="pages"><%= render 'pages' %></div></div>
</div>

index.js.erb

$("#form").html("<%= escape_javascript render("form") %>");
$("#pages").html("<%= escape_javascript render("pages") %>");

_form.html.erb

<%= form_for(@page) do |f| %>
    <div class="control-group">
        <div class="controls">  
      <%= f.label :message %>
      <%= f.text_area(:message, size: "40x2", :maxlength => 254, placeholder: "Enter your message here", required: true) %>

    <%= f.label 'Unit'%>

    <%= f.select :unit_id, options_for_select(Unit.active.order(:unit_name).map{ |unit| [unit.unit_name, unit.id] } + [["All Units", "all"]]), {:include_blank => true}, {:multiple => 'true', class: 'select'} %>

    <%= f.label 'Region' %>
    <%= f.collection_select(:region_id, Region.order("area ASC"), :id, :area, {:include_blank => true}, {:multiple => 'true', :class => 'select' } )%>
      </div>
        </br>
        <%= f.button  'Send Page', class: 'btn btn-info', data: {disable_with: "<i class='icon-spinner'></i>Sending..."} %>
    </div>
<% end %>

_results.html.erb

<table class="table table-striped">
  <thead>
    <tr>
      <th>Incident Number</th>
      <th>Patient Name</th>
      <th>Transfer Date</th>
      <th>Transferred From</th>
      <th>Transferred To</th>
      <th>Determinant</th>
      <th>Unit</th>
      <th>Insurance</th>
      <th>Cancelation Reason</th>
      <th>Billing Reference</th>
      <th>Run Time</th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <% @calls.each do |c| %>
      <tr>
        <td><%= c.incident_number %></td>
        <td><%= c.patient_name %></td>
        <td><%= c.transfer_date.strftime("%m/%d/%y") %></td>
        <td><%= transferred_from(c) %><br/><%= transferred_from_address(c) %></td>
        <td><%= transferred_to(c) %><br/><%= transferred_to_address(c) %></td>
        <td><%= c.nature.try(:determinant)%></td>
        <td><%= c.units.map(&:unit_name).join(", ") %></td>
        <td><%= c.insurance.try(:insurance_type)%></td>
        <td><%= c.cancel_reason.try(:reason) %></td>
        <td><%= c.imx_num %></td>
        <td><%= TimeFormatter.format_time(c.run_time) if c.in_service_time? %></td>
        <td><%= link_to 'View', c, :class => 'btn btn-info btn-mini'%></td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= will_paginate @calls, :renderer => BootstrapPagination::Rails %>

Here is the jQuery from my application.js file:

$(function (){
  $(".select").select2({
        placeholder: "Select One",
        allowClear: true
  });

    $(function() {
      $("#pages th a, #pages .pagination a").live("click", function() {
        $.getScript(this.href);
        return false;
      });
    });

It looks like when I click a pagination link the dom is not getting reloaded and thus breaking the UI with select2. I can still pick objects in the form but UI-wise it's broken.

I was wondering if anyone could help point me in the right direction with this as I'm not very savvy with jQuery or javascript/ajax.

If my question is not clear or you need further examples, please let me know.

working

breaks on ajax pagination

Answer 1

So far this is the only useful answer I've come up with.

In my index.js.erb file I put the following:

   $("select").select2({
        placeholder: "Select One",
        allowClear: true
  }); init();

This will reinitialize select2 by destroying the call on an Ajax request then calling select2 again. It behaves as expected and keeps the UI properties while overriding the "turbolinks-like" Ajax behavior.

This is working 100% for me, although it feels a bit hackish that I have to do this in UJS, but hey whatever works right?