I'm currently trying to extend my symfony-form with the possibility to add custom collection entrys. I followed the Manual https://symfony.com/doc/current/form/form_collections.html as close as possible (besides the structure of the form itself)
(Edit: I'm using Smyfony 3.4 and bootstrap 4 form style)
The problem is, that the checkboxes if the item, thats beeing added to the Collection-List seems to be missing the bootstrap-initialization. Therefore its not usable at all.
Is there a way to manually initialize the checkbox?
Here is the (simplified) code:
Formtypes:
class MissionReportFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('playerparticipations', CollectionType::class, [
'allow_add' => true,
'entry_type' => PlayerParticipationsFormType::class, ]);
}
public function configureOptions(OptionsResolver $resolver): void
{
$resolver->setDefaults([
'data_class' => MissionReport::class,
]);
}
}
class PlayerParticipationsFormType extends AbstractSfoType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('delay', CheckboxType::class, ['required' => false]);
}
public function configureOptions(OptionsResolver $resolver): void
{
$resolver->setDefaults([
'data_class' => PlayerMissionParticipation::class,
]);
}
}
Controller:
$missionReport = new MissionReport();
$missionReport->addPlayerparticipation(new PlayerMissionParticipation());
return $this->render ( 'SfoLcarsBundle::punktedokument.html.twig', array (
'form' => $this->createForm(MissionReportFormType::class,$missionReport)->createView()
) );
Form
{{ form_start(form) }}
{{ form_errors(form) }}
<table class="table table-bordered table-condensed table-responsive" id="punktedokument">
<tbody id="punktedokument_entrys" data-prototype="<tr><td>{{ form_widget(form.playerparticipations.vars.prototype.delay)|e('html_attr')}}</td></tr>">
<tr>
<th class="col-md-pull-0 col-md-1"></th>
</tr>
{{ form_label(form.playerparticipations, 'Punktetabelle') }}
{% for participation in form.playerparticipations %}
<tr>
<td>{{ form_widget(participation.delay) }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{{ form_end(form) }}
Javascript
var $collectionHolder;
var $addParticipationButton = $('<button type="button" class="add_participation_link btn btn-primary">Neuer Eintrag</button>');
var $newLinkLi = $addParticipationButton;
jQuery(document).ready(function() {
$collectionHolder = $('tbody#punktedokument_entrys');
$collectionHolder.append($newLinkLi);
$collectionHolder.data('index',$collectionHolder.find('tr').length-1);
$addParticipationButton.on('click', function(e) {
addParticipationForm($collectionHolder, $newLinkLi);
});
});
function addParticipationForm($collectionHolder, $newEntry) {
var prototype = $collectionHolder.data('prototype');
var index = $collectionHolder.data('index');
var newForm = prototype;
newForm = newForm.replace(/__name__/g, index);
$collectionHolder.data('index', index + 1);
$newEntry.before(newForm);
}
HTML of the initialy available TD:
<td>
<div class="form-check">
<div class="icheckbox_minimal" aria-checked="false" aria-disabled="false" style="position: relative;">
<input type="checkbox" id="mission_report_form_playerparticipations_0_missing" name="mission_report_form[playerparticipations][0][missing]" class="form-check-input" value="1" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
<label class="form-check-label" for="mission_report_form_playerparticipations_0_missing">Missing</label>
</div>
</td>
Resulting HTML of the added TD:
<td>
<div class="form-check">
<input type="checkbox" id="mission_report_form_playerparticipations_1_missing" name="mission_report_form[playerparticipations][1][missing]" class="form-check-input" value="1">
<label class="form-check-label" for="mission_report_form_playerparticipations_1_missing">Missing</label>
</div>
</td>
Since I'm not the very advanced Webdeveloper and the project i'm supporting was created by another person, i was not correct suspecting the checkboxes to be a bootstrap checkbox.
As a matter of fact it was a jquery checkbox wich i could initialize via .icheck()
Now it works. Thanks nevertheless to you both :)