Bonjour, alors je vous explique j'ai un tableau dans lequel s'ajoute des formulaire pour créer des produit eux mêmes dans un formulaire pour créer des retour car un retour à plusieurs produits. Je n'arrives pas à lorsque j'ajoute une ligne,que au bout de cette ligne il y est un bouton pour supprimer la ligne que je viens d'ajouter. Pourriez vous m'aider ?

 
{% extends '/main/index2.html.twig'  %}
{% block title %}Sav  {% endblock %}
{% block text %}


<h4><u><strong> Entreprise :</u></strong></h4>
{{ form_start(form) }}

    {# render the return after sale service  #}
   
    
<div class="row">
        <div class="col-sm-3">
          {{ form_row(form.mnemonicCode,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
        <div class="col-sm-3">
          {{ form_row(form.sylobCode,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
        <div class="col-sm-6">
          {{ form_row(form.postCode,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
</div>
<div class="row">
        <div class="col-sm-6">    
          {{ form_row(form.socialReason,{'attr': {'class': 'form-control mb-2 mdb-autocomplete'}}) }}
        </div>
        <div class="col-sm-6">
          {{ form_row(form.city,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
</div>
<div class="row">    
        <div class="col-sm-3">
          {{ form_row(form.country,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
        <div class="col-sm-3">
          {{ form_row(form.phone,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
        <div class="col-sm-3">
          {{ form_row(form.fax,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
        <div class="col-sm-3">
          {{ form_row(form.email,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
</div>
<div class="row"> 
        <div class="col-sm-3">
          {{ form_row(form.additionalAdress,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
        <div class="col-sm-3">
          {{ form_row(form.adress,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
        <div class="col-sm-3">
          {{ form_row(form.identificationTag,{'attr': {'class': 'form-control mb-2'}}) }}
        </div>
        <div class="col-sm-3">
          {{ form_row(form.deliveryDate,{'attr': {'class': ''}}) }}
        </div>
</div>       

<h4><u><strong> Produits expertisés :  </u></strong></h4>
{% form_theme form.products with ['bootstrap_4_horizontal_layout.html.twig','form_table_layout2.html.twig'] %}
<table class="table table-sm" id="products" class="products" data-prototype="{{ form_widget(form.products.vars.prototype,{'attr': {'class': ''}})|e('html_attr') }}">
    {# iterate over each existing tag and render its only field: name #}

    {% for product in form.products %}
        <tr>
          <td>{{form_widget(product.productReference,{'attr': {'class': 'form-inline'}} )}}</td>
          <td>{{form_widget(product.returnCodes,{'attr': {'class': 'form-inline'}} )}}</td>
          <td>{{form_widget(product.afterSSAction,{'attr': {'class': 'form-inline'}} )}}</td>
          <td>{{form_widget(product.dateCode,{'attr': {'class': 'form-inline'}} )}}</td>
          <td>{{form_widget(product.commentary,{'attr': {'class': 'form-inline'}} )}}</td>

          <td class="product_actions"></td>
        </tr>
    {% endfor %}

    
 </table>


{% for productForm in form.products %}
        <div class="col-xs-4 js-genus-scientist-item">
            <a href="#" class="js-remove-scientist pull-right">
                <span class="fa fa-close"></span>
            </a>
            {{ form_errors(productForm) }}
            {{ form_row(productForm.productReference)}}
            {{ form_row(productForm.dateCode) }}
            {{ form_row(productForm.afterSSAction) }}
            {{ form_row(productForm.returnCodes) }}
            {{ form_row(productForm.commentary) }}
        </div>

    {% endfor %}

     
    {{ form_row(form.submit,{'attr': {'class': ''}}) }}
    {{ form_widget(form._token) }}
    
{{ form_end(form, {'render_rest': false}) }}


{% endblock %}

{% block javascripts2 %}

<script src="/js/bootstrap-autocomplete.min.js"></script>
<script>
    var collectionHolder;
    // setup an "add a product" link
    var addReturnedProductButton = $('<tr><td colspan=6><button  type="button" class="add_product_link ">Add a product</button></td></tr>');
    var newLinkLi = $('#products').append(addReturnedProductButton);

    jQuery(document).ready(function() {
        collectionHolder = $('#products');

        collectionHolder.find('.product_actions').each(function() {
            addTagFormDeleteLink($(this).parent(), $(this));
        });

        collectionHolder.append(newLinkLi);
        collectionHolder.data('index', collectionHolder.find(':input').length);
        addReturnedProductButton.on('click', function(e) {
            addReturnedProductForm(collectionHolder, newLinkLi);
        });

        // Autocomplétions
        $( "#return_after_ss_socialReason" ).autoComplete({
          resolver: 'ajax',
          minLength: 1,
          events: {
            search: function (qry, callback) {
              $.ajax('/autocomplete', {data: { 'qry': qry}})
              .done(function (res) {
                callback($.map(res, function(item, key){
                  item.value = item.id;
                  item.text = item.socialReason;
                  return item;
                }));
              });
            }
          }
        });
          

        $('#return_after_ss_socialReason').on('autocomplete.select', function (evt, item) {
          //console.log('selected item : ', item);
          $('#return_after_ss_sylobCode').val(item.sylobCode);
          $('#return_after_ss_mnemonicCode').val(item.mnemonicCode);
          $('#return_after_ss_socialReason').val(item.socialReason);
          $('#return_after_ss_adress').val(item.adress);
          $('#return_after_ss_city').val(item.city.city);
          $('#return_after_ss_postCode').val(item.city.postCode);
          $('#return_after_ss_country').val(item.city.country);
          $('#return_after_ss_email').val(item.email);
          $('#return_after_ss_phone').val(item.phone);
          $('#return_after_ss_fax').val(item.fax);
        });

    });

    function addReturnedProductForm(collectionHolder, newLinkLi) {
        var prototype = collectionHolder.data('prototype');

        var index = collectionHolder.data('index');

        //var newForm = prototype;
        var newForm = prototype;


        // increase the index with one for the next item
        collectionHolder.data('index', index + 1);

        // Display the form in the page in an li, before the "Add a tag" link li
        var newFormLi = newForm;// = $('<tr></tr>').append(newForm);
        //newLinkLi.before(newFormLi);
        //newLinkLi.after(newForm);
       $('#products').prepend(newFormLi);

        addTagFormDeleteLink(newFormLi);
    }

    function addTagFormDeleteLink(tagFormLi, tagInsert) {
        var removeFormButton = $('<button class="btn btn-primary btn-filter waves-effect waves-light" type="button">Delete  </button>');
        if(tagInsert){
          tagInsert.append(removeFormButton);
        } else  {

          tagFormLi.append(removeFormButton);

        }

        removeFormButton.on('click', function(e) {
            // remove the li for the form
            tagFormLi.remove();
        });
    }
</script>



{% endblock %}

-
Edité par ___Bram's 18 juin 2019 à 16:46:00