Рельсы Best_in_place активатор не работает после того, как с помощью визуализации частичного удаленного вызова Ajax

Question

У меня есть таблица Haml и записи листинга с каждым проходным этого экземпляра переменной @academic_classes, я поместил best_in_place выбрать вход для второго тд атрибута объекта, который является 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 Див и .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('') 
} 

После когда DIV нагрузки с помощью AJAX мой best_in_place select активатор не работает, если я не обновляю страницу.

Вот одна вещь, которую я заметил, что, когда я нажимаю на ярлык лучших в атрибуте место название категории класса затем снова нажмите на активатор, который значок карандаша глиф со ссылкой, как вы можете видеть выше, best_in_place работает отлично, но я должен делать это на каждой метке в списке, тогда каждый из ее соответствующих активаторов работает и обновляется.

Можете ли вы, ребята, сказать мне, что я делаю неправильно, или есть что-то, что нужно сделать в этом коде? Также, пожалуйста, скажите мне любую другую альтернативу этого кода. Я хочу использовать best_in_place для выбора на индексной странице вместо show page, где я могу разместить это для каждого элемента. Прямо сейчас я поместил объект 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 в нем, то они отображаются как простой HTML и еще не связаны. Вы можете сделать что-то вроде этого:

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

, а затем ваши поля бипов должны снова работать. Я настоятельно рекомендую добавить класс к %tr для каждого academic_class (например, %tr.academic), а затем вызывать best_in_place специально только для вновь визуализированных строк (вместо того, чтобы переадресовывать любые другие элементы best_in_place).После того, как вы добавите класс, вы можете сделать:

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