templates/variation/form.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/constrained.html.twig' %}
  3. {% block page_content %}
  4.     {{ form_start(form) }}
  6.     <div class="form-group">
  7.         <button type="button" class="add_item_link btn btn-secondary" data-collection-holder-class="domainPool">
  8.             Add a variation
  9.         </button>
  10.     </div>
  12.     <div>
  13.         <ul
  14.             class="domainPool"
  15.             data-index="0"
  16.             data-prototype="
  17.             <div class=&quot;input-group&quot;>
  18.                 <input type=&quot;text&quot; id=&quot;domain_variation_domainPool___name__&quot; name=&quot;domain_variation[domainPool][__name__]&quot; required=&quot;required&quot; class=&quot;form-control&quot; />
  19.                 <div class=&quot;input-group-append remove_item_link&quot;>
  20.                     <div class=&quot;input-group-text&quot;>X</div>
  21.                 </div>
  22.             </div>
  23.             "
  24.         >
  25.             {% for domain in form.domainPool %}
  26.                 <li class="domain-item mt-2">
  27.                     <div class="input-group">
  28.                         {{ form_errors(domain) }}
  29.                         {{ form_widget(domain) }}
  30.                         <div class="input-group-append remove_item_link">
  31.                             <div class="input-group-text">X</div>
  32.                         </div>
  33.                     </div>
  34.                 </li>
  35.             {% endfor %}
  36.         </ul>
  37.     </div>
  38.     {{ form_end(form) }}
  39.     
  40.     <script>
  41.         function removeItem (event) {
  42.             $(event.currentTarget).closest('li.domain-item').remove();
  43.             refreshIndex();
  44.         }
  46.         function refreshIndex() {
  47.             // remapping index
  48.             const lstInput = $('li.domain-item input');
  49.             const nbOfInput = lstInput.length;
  50.             for (let i =0; i< nbOfInput; i += 1) {
  51.                 $(lstInput[i]).attr('name', 'domain_variation[domainPool][' + i + ']');
  52.                 $(lstInput[i]).attr('id', 'domain_variation_domainPool_' + i);
  53.             }
  55.             // rebinding click event
  56.             const removeItemButtons = $('div.remove_item_link');
  57.             removeItemButtons.unbind('click');
  58.             removeItemButtons.click(function (e) {
  59.                 removeItem(e);
  60.             });
  61.         }
  63.         $('button.add_item_link').click(function (e) {
  64.             const collectionHolder = document.querySelector('.' + $(e.target).data('collection-holder-class'));
  65.             const item = document.createElement('li');
  66.             $(item).attr('class', 'domain-item mt-2');
  67.             item.innerHTML = collectionHolder
  68.                 .dataset
  69.                 .prototype;
  71.             collectionHolder.appendChild(item);
  72.             refreshIndex();
  73.         });
  75.         $('div.remove_item_link').click(function (e) {
  76.             removeItem(e);
  77.         });
  78.     </script>
  79. {% endblock %}