best in place - Rails Best_in_place激活器在通过远程ajax调用渲染部分后不工作

Question

我有一个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选项卡切换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并渲染部分。类div和。目录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('')
}

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

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

你们能告诉我我做错了什么，或者在这段代码中需要做些什么吗?也请告诉我这段代码的任何其他替代方案，我想使用best_in_place选择在索引页，而不是显示页，在那里我可以把这个到每个元素。现在，我已经将对象Id放置到激活器中，以使其唯一。

Answer 1

我在刷新部分时遇到了同样的问题，并且不得不使用相同的解决方法，即单击最佳位置跨度以使激活器工作。这可能不是最好的解决方案，但我的是让JavaScript在同一js中点击所有标签。我用来渲染局部的erb文件。

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

Answer 2

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

如果你正在渲染一个带有best_in_place字段的partial，那么它们就像普通HTML一样呈现，还没有被绑定。你可以这样做:

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

，然后您的髋场应该再次工作。我强烈建议为每个academic_class(如%tr.academic)添加一个类到%tr，然后仅在新呈现的行上专门调用best_in_place(而不是重新绑定任何其他best_in_place元素)。添加类之后，您可以这样做:

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