I'd like to create an admin panel for one of my projects, so I started with this tutorial: How to Embed a Collection of Forms
Continued with creating double embedded form, so i have an object, what have objects, and these objects also have objects :D
The Doctrine mapping is good, and works, the problem:
When I click on the "Add new Property" it creates the property, but when I click on the "Add Detail" (which adds a detail to the property) it creates the Detail's fields, but one extra field too:
<label class="required">1label__</label>
The formtype codes:
For the main class
$builder
->add('forma')
;
$builder->add('properties', 'collection',array(
'type' => new PropertyType(),
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false
));
For the property class:
$builder
->add('nev')
//->add('szokokut')
;
$builder->add('details', 'collection',array(
'type' => new DetailType(),
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false
));
For the Detail class:
$builder
->add('description')
//->add('property')
;
These codes are from the buildFrom() functions.
Any idea why is there the extra field?
The first prototype:
<div id="szokokut_storebundle_szokokuttype_properties___name__"><div><label for="szokokut_storebundle_szokokuttype_properties___name___nev" class="required">Nev</label><input type="text" id="szokokut_storebundle_szokokuttype_properties___name___nev" name="szokokut_storebundle_szokokuttype[properties][__name__][nev]" required="required" maxlength="100" /></div><div><label class="required">Details</label><div id="szokokut_storebundle_szokokuttype_properties___name___details" data-prototype="<div><label class="required">__name__label__</label><div id="szokokut_storebundle_szokokuttype_properties___name___details___name__"><div><label for="szokokut_storebundle_szokokuttype_properties___name___details___name___description" class="required">Description</label><input type="text" id="szokokut_storebundle_szokokuttype_properties___name___details___name___description" name="szokokut_storebundle_szokokuttype[properties][__name__][details][__name__][description]" required="required" maxlength="100" /></div></div></div>"></div></div></div>
The second:
<div><label class="required">1label__</label><div id="szokokut_storebundle_szokokuttype_properties_1_details_1"><div><label for="szokokut_storebundle_szokokuttype_properties_1_details_1_description" class="required">Description</label><input type="text" id="szokokut_storebundle_szokokuttype_properties_1_details_1_description" name="szokokut_storebundle_szokokuttype[properties][1][details][1][description]" required="required" maxlength="100" /></div></div></div>
The problem will be here:
Its from the tutorial (with a little change) and it replaces the __name__ field in both of the prototypes :/
var $addPropertyLink = $('<a href="#" class="add_property_link">Tulajdonság hozzáadása</a>');
var $newLinkLi = $('<p></p>').append($addPropertyLink);
jQuery(document).ready(function() {
propertyHolder.append($newLinkLi);
$addPropertyLink.on('click', function(e) {
e.preventDefault();
addPropertyForm(propertyHolder, $newLinkLi);
});
});
function addPropertyForm(collectionHolder, $newLinkLi) {
// Get the data-prototype we explained earlier
var prototype = collectionHolder.attr('data-prototype');
// Replace '__name__' in the prototype's HTML to
// instead be a number based on the current collection's length.
var newForm = prototype.replace(/__name__/g, collectionHolder.children().length);
// Display the form in the page in an li
var $newFormLi = $('<p></p>').append(newForm);
$newLinkLi.before($newFormLi);
addFormDeleteLink($newFormLi);
var $addDetailLink = $('<a href="#" class="add_detail_link">Részlet hozzáadása</a>');
var $LinkLi = $('<p></p>').append($addDetailLink);
$newFormLi.find('div[id$=_details]').append($LinkLi);
$addDetailLink.on('click',function(e){
e.preventDefault();
addDetailForm($newFormLi.find('div[id$=_details]'),$LinkLi);
});
}
function addFormDeleteLink($FormLi) {
var $removeFormA = $('<a href="#">törlés</a>');
$FormLi.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
$FormLi.remove();
});
}
function addDetailForm(collectionHolder,$newLinkLi){
// Get the data-prototype we explained earlier
var prototype = collectionHolder.attr('data-prototype');
// Replace '__name__' in the prototype's HTML to
// instead be a number based on the current collection's length.
var newForm = prototype.replace(/__name__/g, collectionHolder.children().length);
// Display the form in the page in an li
var $newFormLi = $('<p></p>').append(newForm);
$newLinkLi.before($newFormLi);
addFormDeleteLink($newFormLi);
}