Search code examples
symfonybootstrap-4twigsymfony-forms

Added Boostrap Checkbox in Symfony Form Collection missing bootstrap init


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="&lt;tr&gt;&lt;td&gt;{{ form_widget(form.playerparticipations.vars.prototype.delay)|e('html_attr')}}&lt;/td&gt;&lt;/tr&gt;">
    <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>

Result on the page - missing the Checkboxes


Solution

  • 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 :)