javascript - select2 在分页时与 ajax/jquery 中断

Question

我有一个 Rails 3.2.21 应用程序，我使用 select2 作为我的下拉菜单和 UI。在此 View 中，我正在进行多项选择以在 View /表单中选择不同的元素/对象。当初始 Controller View 加载时，正如您在第一张图片中看到的那样，一切都很好。但是，当我单击第二页进行分页时，select2 被 Ajax 破坏，正如您在最后一张图片中看到的那样。

这是我的观点:

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 %>

这是我的 application.js 文件中的 jQuery:

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

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

看起来当我单击分页链接时，dom 没有重新加载，因此使用 select2 破坏了 UI。我仍然可以在表单中选取对象，但在 UI 方面它已损坏。

我想知道是否有人可以帮助我指出正确的方向，因为我对 jQuery 或 javascript/ajax 不太了解。

如果我的问题不清楚或者您需要更多示例，请告诉我。

工作

ajax 分页中断

Answer 1

到目前为止，这是我想到的唯一有用的答案。

在我的 index.js.erb 文件中，我输入了以下内容:

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

这将通过销毁 Ajax 请求上的调用然后再次调用 select2 来重新初始化 select2。它的行为符合预期并保留 UI 属性，同时覆盖“类似turbolinks”的 Ajax 行为。

这对我来说 100% 有效，虽然我必须在 UJS 中这样做感觉有点黑客，但是嘿，无论什么都有效吗？