Rails Best_in_place 激活器在通过远程 ajax 调用部分渲染后不起作用答案

【问题标题】：Rails Best_in_place activator not working after render partial by remote ajax callRails Best_in_place 激活器在通过远程 ajax 调用部分渲染后不起作用
【发布时间】：2015-05-23 15:50:28
【问题描述】：

我有一个 haml 表，记录通过这个实例变量 @academic_classes 列出每个循环，我已将 best_in_place 选择输入放置到第二个 td 对象属性，即 class_category ，这里是我部分的haml中的代码。

_classes.html.erb

- @academic_classs.all.each do |academic_class|
  %tr
    %td= check_box_tag "class_ids[]", academic_class.id
    %td
      - unless academic_class.class_category.blank?
        = best_in_place academic_class, :class_category_id, :as => :select, activator: '#edit-class-category-name_' + academic_class.id.to_s, :collection => ClassCategory.all.map{|m| [m.id, m.name]}, inner_class: "form-control"
        = link_to 'javascript:void(0)', class: "pull-right", id: 'edit-class-category-name_' + academic_class.id.to_s do
          .glyphicon.glyphicon-pencil
      - else
        %em No Category
    %td= academic_class.name
    %td= academic_class.section
    %td= link_to "javascript: void(0)", "data-href" => "#{academic_class_path(academic_class)}", method: :delete, onClick: "confirmDelete(this)" do
      .glyphicon.glyphicon-trash

我正在使用 Bootstrap Tab 切换 Javascript 组件，但在这里我使用远程调用并在单击任何一个选项卡时将部分呈现给 div。

index.html.erb

<ul class="nav nav-tabs" role="tablist" id="academic_classes_tab">
    <li role="presentation" class="active">
      <%= link_to "Classes", "#classes_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#classes', id: "classes_tab"  %>
    </li>

    <li role="presentation">
      <%= link_to "Categories", "#categories_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#categories', class: "categories_tab"  %>
    </li>
  </ul>

  <div class="tab-content academic_classes">
    <div role="tabpanel" class="tab-pane fade in active" id="classes">
      <div class="classes">
        <%= render "classes" %>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="categories">
      <div class="categories">
      </div>
    </div>
  </div>

现在，当我单击任何一个选项卡时，它会使用不显眼的 javascript 并将部分呈现为 .classes div 和 .categories div，如上所示

index.js.erb

if($("#academic_classes_tab li:first-child").hasClass("active")) {
    $(".classes").html("<%= j render(partial: 'classes') %>")
    $(".categories").html('')
    $(".add_classes").html('')
} else 

if($("#academic_classes_tab li:nth-child(2)").hasClass("active")) {
    $(".categories").html("<%= escape_javascript(render 'categories').html_safe %>")
    $(".classes").html('')
    $(".add_classes").html('')
}

使用 ajax 加载 div 后，我的 best_in_place 选择激活器不起作用，除非我刷新页面。

我注意到的一件事是，当我单击最佳位置属性标签 类类别名称 然后再次单击激活器，这是带有链接的铅笔字形图标，如上所示， best_in_place 工作正常，但我必须在列表中的每个标签上执行此操作，然后每个相应的激活器都在工作和更新。

你们能告诉我我做错了什么还是在这段代码中需要做些什么？另外请告诉我此代码的任何其他替代方案我想在索引页面而不是显示页面上使用 best_in_place 选择，我可以将它放置到每个元素。现在我已将对象 ID 放置到激活器中以使其唯一。

【问题讨论】：

您是否尝试过以; 结束JS 语句，例如onClick？你在使用 turbolinks（Rails 4 中的默认设置）吗？

标签： ruby-on-rails best-in-place

【解决方案1】：

我在刷新部分内容时遇到了同样的问题，并且必须使用相同的解决方法，即单击最佳就地跨度才能使我的激活器工作。这可能不是最好的解决方案，但我的方法是让 JavaScript 单击我用来呈现部分的同一个 js.erb 文件中的所有标签。

bips = document.getElementsByClassName('best_in_place');
for (var i = 0; i < bips.length; i++) {
    bips[i].click();
}

【讨论】：

【解决方案2】：

在您的 index.js.erb 中，重新绑定您的 best_in_place 字段（您应该能够使用您在 application.js 文件中编写的相同代码——我猜——）。

如果您正在渲染其中包含 best_in_place 字段的部分，那么它们将像普通 HTML 一样渲染并且尚未绑定。你可以这样做：

$('.best_in_place').best_in_place();

然后您的 bip 字段应该会再次起作用。我强烈建议为每个academic_class（如%tr.academic）添加一个类到%tr，然后只在新渲染的行上专门调用best_in_place（而不是重新绑定任何其他best_in_place元素）。添加类后，您可以：

$('.academic .best_in_place').best_in_place();

【讨论】：