Symfony2, Typeahead, коллекция форм

Question

У меня есть этот раздел Javascript для коллекции форм в Symfony2.

$(document).ready(function() { 
    // Create Input Text 
    $(document).on('click', '.btn-add[data-target]', function(event) { 

    event && event.preventDefault(); 

    var collectionHolder = $('#' + $(this).attr('data-target')); 

    if (!collectionHolder.attr('data-counter')) { 
     collectionHolder.attr('data-counter', collectionHolder.children().length); 
    } 

    var prototype = collectionHolder.attr('data-prototype'); 
    var form = prototype.replace(/__name__/g, collectionHolder.attr('data-counter')); 

    collectionHolder.attr('data-counter', Number(collectionHolder.attr('data-counter')) + 1); 
    collectionHolder.append(form); 

    typeInitialize(); 

    return false; 

    }); 

    // Remove Input Text 
    $(document).on('click', '.btn-remove[data-related]', function(event) { 

    event && event.preventDefault(); 

    var name = $(this).attr('data-related'); 

    ($('*[data-content="'+ name +'"]')).remove(); 

    }); 

    // Initialize Typeahead 
    function typeInitialize() { 

    // Create typeahead instance 
    var url = Routing.generate('ajax_search', {name: 'WILDCARD'}); 
    // Trigger typeahead + bloodhound 
    var products = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     identify: function(obj) { return obj.u_name; }, 
     prefetch: 'json/result.json', 
     remote: { 
     url: url, 
     wildcard: 'WILDCARD', 
     } 
    }); 

    products.initialize(); 

    $('.typeahead').typeahead({ 
     minLength: 3, 
     highlight: true, 
     limit: 10, 
    }, 
    { 
     name: 'product', 
     display: 'u_name', 
     source: products.ttAdapter() 
    }); 
    } 
}); 

Шаблон Twig:

{% extends '::base.html.twig' %} 
{% block body %} 
{% macro widget_prototype(widget, remove_text) %} 
{% if widget.vars.prototype is defined %} 
    {% set form = widget.vars.prototype %} 
    {% set name = widget.vars.prototype.vars.full_name %} 
{% else %} 
    {% set form = widget %} 
    {% set name = widget.vars.full_name %} 
{% endif %} 
<div data-content="{{ name }}"> 
    <div class="btn-remove"> 
     <a class="btn-remove" data-related="{{ name }}">{{ remove_text }}</a> 
    </div> 
    {{ form_widget(form) }} 
</div> 
{% endmacro %} 

<div class="row"> 
    <div class="col-md-12"> 
    <a class="btn-add" class="clicked" data-target="post_tags">Adauga Produs</a> 
    {{form_start(form, {'attr': {'class': 'form-horizontal'}})}} 
    {{form_row(form.name)}} 
    <div id="post_tags" data-prototype="{{ _self.widget_prototype(form.product, 'Delete Product')|escape }}"> 
     {% for widget in form.product.children %} 
      {{ _self.widget_prototype(widget, 'Delete Product') }} 
     {% endfor %} 
    </div> 
    {{form_end(form)}} 
    </div> 
</div> 
{% endblock %} 

код не содержит каких-либо ошибок, тестировала его весь день, но когда я пытаюсь добавить новое поле добавляет его без проблем а второе поле добавляет второе поле, но в первом поле добавляется пустой диапазон от typeahead, а затем, когда я добавляю третье поле, он добавляет еще один пустой диапазон к первому элементу. В четвертом поле он добавляет к первому второму и третьему входу пустой диапазон для typeahead. С моей точки зрения проблема заключается в функции typeInitialize и как я ее называю, но я не мог понять, что я сделал неправильно в этой части, а затем вторая проблема - когда я нажимаю на удаление, удаляются все входы что я добавил.

Answer 1

Я изменил весь код, исправил проблемы. Вот обновленная версия для тех, кто в ней нуждается.

// setup an "add a tag" link 
var $addTagLink = $('<a href="#" class="btn btn-primary add_tag_link">Adauga Produs</a>'); 
var $newLinkLi = $('#post_tags').append($addTagLink); 

jQuery(document).ready(function() { 
    // Get the ul that holds the collection of tags 
    var $collectionHolder = $('#post_tags'); 

    // add the "add a tag" anchor and li to the tags ul 
    $collectionHolder.append($newLinkLi); 

    // count the current form inputs we have (e.g. 2), use that as the new 
    // index when inserting a new item (e.g. 2) 
    $collectionHolder.data('index', $collectionHolder.find(':input').length); 

    $addTagLink.on('click', function(e) { 
     // prevent the link from creating a "#" on the URL 
     e.preventDefault(); 

     // add a new tag form (see code block below) 
     addTagForm($collectionHolder, $newLinkLi); 

     typeInitialize(); 
    }); 


}); 

function addTagForm($collectionHolder, $newLinkLi) { 
    // Get the data-prototype explained earlier 
    var prototype = $collectionHolder.data('prototype'); 

    // get the new index 
    var index = $collectionHolder.data('index'); 

    // Replace '$$name$$' in the prototype's HTML to 
    // instead be a number based on how many items we have 
    var newForm = prototype.replace(/__name__/g, index); 

    // 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 = $('<div class="post_tags"></div>').append(newForm); 

    // also add a remove button, just for this example 
    $newFormLi.append('<a href="#" class="btn btn-warning remove-tag">Sterge Produsul</a>'); 

    $newLinkLi.before($newFormLi); 

    // handle the removal, just for this example 
    $('.remove-tag').click(function(e) { 
     e.preventDefault(); 

     $(this).parent().remove(); 

     return false; 
    }); 
} 
// Initialize Typeahead 
function typeInitialize() { 

    // Create typeahead instance 
    var url = Routing.generate('ajax_search', {name: 'WILDCARD'}); 
    // Trigger typeahead + bloodhound 
    var products = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    identify: function(obj) { return obj.u_name; }, 
    prefetch: 'json/result.json', 
    remote: { 
     url: url, 
     wildcard: 'WILDCARD', 
    } 
    }); 

    products.initialize(); 



    $('.post_tags').find('input[type=text]:last').typeahead({ 
    minLength: 3, 
    highlight: true, 
    limit: 10, 
    }, 
    { 
    name: 'product', 
    display: 'u_name', 
    source: products.ttAdapter() 
    }).on('typeahead:selected', function (e, datum) { 
    console.log(datum); 
    }); 
}