Вложенное поле формы с помощью Jquery

#jquery #ruby-on-rails

Вопрос:

У меня есть форма, в которую я загружаю вложенные поля. Это отлично работает, если у меня есть только один div fields но если у меня их 2 для разных типов полей формы, это удваивает запрос и добавляет 2 поля вместо 1. Я пытался использовать функцию .closest , но она вообще не работает

вот что у меня есть

   $('form').on('click', '.add_fields', function(event) {
    $(event.target).closest('.nested-form'), function(e) { 
      var regexp, time;
      time = new Date().getTime();
      regexp = new RegExp($(this).data('id'), 'g');
      $('.fields').append($(this).data('fields').replace(regexp, time));
      return e.preventDefault();
    };
  });

затем внутри моей формы у меня есть

 <div class="nested-form">
  <div class="fields">
    <div class="form-group">
      <select name="user[talent_genres_attributes][0][genre]" id="user_talent_genres_attributes_0_genre">
        <option value="Musicians">Musicians</option>
        <option selected="selected" value="Acting">Acting</option>
        <option value="Modeling">Modeling</option>
        <option value="DJs">DJs</option></select>
    </div>
  </div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350559861960" data-fields="<fieldset><div class='form-group'><select name=amp;quot;user[talent_genres_attributes][70350559861960][genre]amp;quot; id=amp;quot;user_talent_genres_attributes_70350559861960_genreamp;quot;><option value=amp;quot;Musiciansamp;quot;>Musicians</option><option value=amp;quot;Actingamp;quot;>Acting</option><option value=amp;quot;Modelingamp;quot;>Modeling</option><option value=amp;quot;DJsamp;quot;>DJs</option></select><input as=amp;quot;hiddenamp;quot; type=amp;quot;hiddenamp;quot; value=amp;quot;falseamp;quot; name=amp;quot;user[talent_genres_attributes][70350559861960][_destroy]amp;quot; id=amp;quot;user_talent_genres_attributes_70350559861960__destroyamp;quot; /><a class=amp;quot;remove_record btn btn-dangeramp;quot; href=amp;quot;#amp;quot;>Delete</a></div></fieldset>" href="#">Add Genres</a>

<div class="nested-form">
  <div class="fields">
    <div class="form-group">
      <select name="user[talent_genres_attributes][1][genre]" id="user_talent_genres_attributes_1_genre">
       <option selected="selected" value="Musicians">Musicians</option>
       <option value="Acting">Acting</option>
       <option value="Modeling">Modeling</option>
       <option value="DJs">DJs</option></select>
    </div>
  </div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350580425060" data-fields="<fieldset><div class='form-group'><select name=amp;quot;user[talent_locations_attributes][70350580425060][location]amp;quot; id=amp;quot;user_talent_locations_attributes_70350580425060_locationamp;quot;><option value=amp;quot;Los Angelesamp;quot;>Los Angeles</option><option value=amp;quot;Chicagoamp;quot;>Chicago</option><option value=amp;quot;Detroitamp;quot;>Detroit</option><option value=amp;quot;Miamiamp;quot;>Miami</option><option value=amp;quot;New Yorkamp;quot;>New York</option><option value=amp;quot;San Franciscoamp;quot;>San Francisco</option></select><input as=amp;quot;hiddenamp;quot; type=amp;quot;hiddenamp;quot; value=amp;quot;falseamp;quot; name=amp;quot;user[talent_locations_attributes][70350580425060][_destroy]amp;quot; id=amp;quot;user_talent_locations_attributes_70350580425060__destroyamp;quot; /><a class=amp;quot;remove_record btn btn-dangeramp;quot; href=amp;quot;#amp;quot;>Delete</a></div></fieldset>" href="#">Add Locations</a>

Кстати, это версия, которая у меня была раньше, которая добавляла поля в оба .fields контейнера div

   $('form').on('click', '.add_fields', function(event) {
      var regexp, time;
      time = new Date().getTime();
      regexp = new RegExp($(this).data('id'), 'g');
      $('.fields').append($(this).data('fields').replace(regexp, time));
      return eevent.preventDefault();
  });

1. являются ли теги nested-form и th a одинаковыми? если это так, используйте prev() вместо closest()

2. также $('.fields') возвращает оба .fields подразделения, используйте что-то вроде $(this).find('.fields') , чтобы захватить только то, что находится внутри этого .nested-form подразделения

Ответ №1:

Обычно я делаю что-то вроде:

<div id='fields_area'></div>

Затем используйте $('#fields_area').append('.fields_container'); для добавления полей

и $(this).closest('.fields_container').remove(); (вызывается кнопкой в .fields_container) для удаления полей.

Оберните ваши данные-* в <div class="fields_container"></div> , и это должно сработать.

Редактировать: Оформить заказ cocoon : https://github.com/nathanvda/cocoon