Partage
  • Partager sur Facebook
  • Partager sur Twitter

bouton de suppression après tableau

    18 juin 2019 à 16:45:33

    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

    • Partager sur Facebook
    • Partager sur Twitter

    bouton de suppression après tableau

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown