используя JavaScript внутри кокона частично (рельсы) - PullRequest
Новая
       40

используя JavaScript внутри кокона частично (рельсы)

0 голосов
/ 30 мая 2018

У меня работает cocoon gem, и я правильно добавляю \ удаляю партиалы в своем приложении.Я добавил динамические выпадающие списки, чтобы отфильтровать выбранные теги в части, созданной коконом.Первый раскрывающийся список использует JavaScript для фильтрации второго раскрывающегося списка, но работает только один раз и только для первого частичного (элемента), который создается и добавляется коконом.Может ли кто-нибудь помочь мне выяснить, каков наилучший способ убедиться, что это работает для каждого партиала, созданного коконом, а также чтобы я мог изменить первый выпадающий список столько раз, сколько я хочу отфильтровать?

Это частичноекод, созданный Cocoon каждый раз, когда я добавляю предмет: 

<script type="text/javascript">
    $('.div_add').bind('click', function() {
      var allOptions = $('#selectprod option')
      $('#selectcat').change(function () {
          $('#selectprod option').remove()
          var classN = $('#selectcat option:selected').prop('class');
          var opts = allOptions.filter('.' + classN);
          $.each(opts, function (i, j) {
              $(j).appendTo('#selectprod');
          });
       });

    });
</script>

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 form-font div_add">
  <div class="prodselectbox">
    <div class="floatleft cat">Board Type</div>
    <div class="floatleft catid">
      <select id="selectcat" name="board_type" class="ship_nice_select">
        <option value="" class="rhth">Select Board Type</option>
        <option>all options for first dropdown</option>            
        <option class="Some" id="selectionone">Some</option> 
        <option class="Some2" id="selectionone">Some2</option>       
      </select>
    </div>
  </div>  
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 form-font div_add">
  <div class="floatleft artid">Part Number</div>
  <div class="floatleft selectarticle">
    <select id="selectprod" name="part_num" class="ship_nice_select">
      <option value="" class="rhth23">Select Part Number</option>
      <% @items_some = Item.where(board_type: "Some") %>
      <% @items_some.each do |i| %>
        <option class="selectors Some">
          <%= i.part_num %>
        </option>
      <% end %> 
      <% @items_some2 = Item.where(board_type: "Some2") %>
      <% @items_some2.each do |i| %>
        <option class="selectors Some2">
          <%= i.part_num %>
        </option>
      <% end %>    
    </select>
  </div>
</div>

1 Ответ

0 голосов
/ 31 мая 2018

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

Два варианта: кокон позволяет прикреплять обратные вызовы при вставке (см. документация )

, но в вашем случае лучшее решениеэто просто написать свой javascript немного по-другому: 

$(document).on('click', '.div_add', function() {
  // your handler here
});

Поскольку этот обработчик присоединяется к документу, он будет работать правильно для динамически добавляемых .div_add -элементов на страницу.

...