嵌入式表单多个字段 - Symfony2 JQuery多个字段

时间：2014-03-18 19:15:46

标签： javascript php jquery symfony

我想要做的是＆＃34;嵌入表格集合＆＃34;如下所述：http://symfony.com/doc/2.3/cookbook/form/form_collections.html

我已经设法正确设置它，直到我添加JavaScript / JQuery的阶段，它工作正常。但是现在我添加了JQuery部分，我可以让它工作得很好。

ScreenShot Image showing issue2 初始加载表单 ScreenShot Image showing issue1 单击“添加产品”后的表单。

如上所示，当我点击添加产品时，它会添加2套添加产品表单。这在它的自我中是不对的。更糟糕的是，添加的2个新行中的第一个不会持久存储到数据库中。每次我添加新产品时都会发生同样的事情。

现在，该文档仅处理一个提交的标签＆＃39;但我认为只是根据我的需要调整教程就足够了。我已经在我的实体/映射/控制器和视图中的任何地方摆弄，试图对此进行排序。我想我已经试图纠正所有事情，但不能。除了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 Form 

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

// Recipe view 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（目前在Twig文件中，但我打算在正常工作后将其移动到单独的文件中）

<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（＆＃39;输入＆＃39;）部分，因为我猜测它正在计算输入字段，但这只是纯粹的猜测工作。

另外，在我提出这个问题的同时，如果“添加产品”，我也会更喜欢这个问题。链接没有删除按钮，因为点击它完全删除了添加产品＆＃39;从表单链接，获取它的唯一方法是刷新页面。想想我已经涵盖了一切。

修改

这是从＆＃39;查看来源＆＃39;创建的原型内容。 （这看起来很恶心，说实话大声笑）

     <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;">

1 个答案:

答案 0 :(得分：1)

好的，所以我觉得我已经破解了它。

问题1：   添加产品按钮会产生3＆＃39;表格＆＃39;但是只有2个会坚持下去。

答案1：   添加＆lt; li>标签到表格中的所有行。

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

这修复了持久性，但......

问题2：   我最初删除＆lt; li>标签是因为它会添加＆＃39;删除＆＃39;一切按钮......

Fixed Image Example

答案2：   我通过在＆lt;中添加一个类来解决这个问题。 li>对于一个领域。

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

然后通过在JQuery中修改它来选择它：

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

对此：

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

问题3： 现在几乎所有的东西都是固定的，除了那里的一切都还有＆＃34; DeleteDelete＆＃34; （两个删除按钮在起始行上彼此相邻，既丑陋又不必要（每个食谱至少有一个产品，所以没有人想要删除所有）

答案3：

删除li。完全来自.find（）：

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

所以现在一切正常，但是当我点击“添加产品”时，它仍会加载2行而不是1行。但它并不是世界末日，但我很想知道为什么有人可以提供帮助。

相关问题
最新问题