嵌入表單的多個字段 - Symfony2的JQuery的多個領域

Question

我試圖做的是「嵌入表單集」如下所述：http://symfony.com/doc/2.3/cookbook/form/form_collections.html

我設法得到它設置正確，併到舞臺我添加JavaScript/JQuery它工作正常。不過，現在我已經添加了JQuery部分，我無法讓它正常工作。點擊添加產品一次之後

初始加載的窗體 形式。

正如您在上面看到的，當我點擊添加產品時，它將添加2套添加產品表單。這在它自己是不正確的。更糟的是，添加的2個新行中的第一行不會保留到數據庫中。每次我添加新產品時都會發生同樣的事情。

現在文檔只處理一個提交的'標籤'，但我認爲只是適應教程，我的需要就足夠了。我在我的實體/映射/控制器和視圖中的每個地方都嘗試對此進行排序。想想我已經嘗試過把所有事情都做好，但卻做不到。除了JQuery代碼本身，因爲我對JQuery或Javascript一無所知（有足夠的工作能夠學習PHP，而不會讓事情複雜化，儘管我一旦掌握了Symfony就完全打算學習它）。

//配方形式

class RecipeType extends AbstractType 
{ 
public function buildForm(FormBuilderInterface $builder, array $options) 
{ 
    $builder 
     ->add('recipename') ->add('recipedesc') 
     ->add('recipeyeild') ->add('recipecost'); 
    $builder->add('product', 'collection', array(
    'type' => new ProductRecipeType(), 
    'allow_add' => true, 
    'by_reference' => false, 
    'allow_delete' => true,)); 
} 

// ProductRecipe表格

class ProductRecipeType extends AbstractType 
{ 
public function buildForm(FormBuilderInterface $builder, array $options) 
{ 
    $builder 
->add('amount') ->add('product'); 
} 

//配方視圖new.twig

<h1>Recipes creation</h1> 
{{ form_start(form) }} 
{{ form_row(form.recipename) }} {{ form_row(form.recipedesc) }} 
{{ form_row(form.recipeyeild) }} {{ form_row(form.recipecost) }} 

<h3>Products</h3> 
<ul class="product" data-prototype="{{ form_widget(form.product.vars.prototype)|e }}">  

{% for products in form.product %} 
    {{ form_row(products.amount) }} 
    {{ form_row(products.product) }} 
{% endfor %} 
</ul> 
{{ form_end(form) }} 

// JQuery的用於配方形式（目前在但是我確實希望將它移動到一個單獨的文件，一旦正常工作）

<script> 
var $collectionHolder; 
// setup an "add a product" link 
var $addProductsLink = $('<a href="#" class="add_product_link">Add a product</a>'); 
var $newLinkLi = $('<li></li>').append($addProductsLink); 

jQuery(document).ready(function() { 
    // Get the ul that holds the collection of tags 

    $collectionHolder = $('ul.product'); 

    // add a delete link to all of the existing tag form li elements 
    $collectionHolder.find('li').each(function() { 
     addProductsFormDeleteLink($(this)); 
    }); 



    // 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); 

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

     // add a new tag form (see next code block) 
     addProductsForm($collectionHolder, $newLinkLi); 
    }); 
}); 
function addProductsForm($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(/__product__/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 = $('<li></li>').append(newForm); 
    $newLinkLi.before($newFormLi); 

    addProductsFormDeleteLink($newFormLi); 
} 
function addProductsFormDeleteLink($productsFormLi) { 
    var $removeFormA = $('<a href="#">Delete</a>'); 
    $productsFormLi.append($removeFormA); 

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

     // remove the li for the tag form 
     $productsFormLi.remove(); 
    }); 
} 

現在我認爲這是導致該問題是這一行：

$collectionHolder.data('index', $collectionHolder.find(':input').length); 

具體的.find（「：輸入」）部分如同我猜它是計數輸入領域，但這只是純粹的猜測工作。

另外，雖然我問這個問題，我也更喜歡它，如果'添加產品'鏈接沒有刪除按鈕，因爲點擊它時完全刪除窗體中的'添加產品'鏈接，唯一的重新獲得它的方式是刷新頁面。想想我已經涵蓋了一切。

編輯

這是從「查看源文件」（看起來有點噁心的說實話笑）

 <ul class="product" data-prototype="&lt;div 
id=&quot;bc_inventorybundle_recipe_product___name__&quot;&gt;&lt;div&gt;&lt; 
label for=&quot;bc_inventorybundle_recipe_product___name___amount&quot; 
class=&quot;required&quot;&gt;Amount&lt;/label&gt;&lt;input type=&quot; 
text&quot; id=&quot;bc_inventorybundle_recipe_product___name___amount&quot; 
name=&quot;bc_inventorybundle_recipe[product][__name__][amount]&quot; 
required=&quot;required&quot; /&gt;&lt;/div&gt;&lt;div&gt;&lt;label 
for=&quot;bc_inventorybundle_recipe_product___name___product&quot;&gt;Product&lt; 
/label&gt;&lt;select id=&quot;bc_inventorybundle_recipe_product___name___product&quot; 
name=&quot;bc_inventorybundle_recipe[product][__name__][product]&quot;&gt;&lt;option 
value=&quot;&quot;&gt;&lt;/option&gt;&lt;option 
value=&quot;66&quot;&gt;Butter&lt;/option&gt;&lt;option 
value=&quot;67&quot;&gt;Beef&lt;/option&gt;&lt;option 
value=&quot;68&quot;&gt;Jam&lt;/option&gt;&lt;option value=&quot;69&quot;&gt;Xanthan 
Gum&lt;/option&gt;&lt;option value=&quot;70&quot;&gt;Test 
Product&lt;/option&gt;&lt;option 
value=&quot;71&quot;&gt;test&lt;/option&gt;&lt;option 
value=&quot;72&quot;&gt;test&lt;/option&gt;&lt;option 
value=&quot;73&quot;&gt;Beef&lt;/option&gt;&lt;option 
value=&quot;74&quot;&gt;Beef&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;"> 

Answer 1

好然後創建原型的東西，所以我覺得我已經差不多解決了。

問題1： 添加產品按鈕導致3個「表單」，但只有2個將被保留。

答案1： 將li>標記添加到表單中的所有行。

{% for products in form.product %} 
    <li>{{ form_row(products.amount) }}</li> 
    <li>{{ form_row(products.product) }}</li> 
{% endfor %} 

此修復持久性，但...

問題2： 我之所以最初取出< LI>標籤，是因爲它會增加「刪除」按鈕，一切...

回答2： 我通過給< li>添加一個類來解決這個問題。

<li class="formrowprod">{{ form_row(products.product) }}</li> 

，然後選擇它通過在JQuery的修改該：

$collectionHolder.find('li').each(function() 

向該：

$collectionHolder.find('li.formrowprod').each(function() 

問題3： 現在幾乎所有的是固定的，一切除仍有「刪除刪除」（DeleteDelete）（兩個刪除按鈕在起始行上相鄰，既醜陋又不必要（每個配方至少有一個產品，所以沒有人會想要刪除所有）

回答3：

刪除li。完全從.find（）：

$collectionHolder.find('formrowprod').each(function() { 
    addProductsFormDeleteLink($(this)); 
    }); 

---

所以現在所有的作品，非常好但是它仍然加載的1 2行，而不是當我點擊「添加產品」，但它不是世界的末日，但想知道爲什麼有人可以幫忙。