Добавлен флажок Boostrap в Symfony Отсутствует коллекция форм bootstrap init - PullRequest
Новая
       54

Добавлен флажок Boostrap в Symfony Отсутствует коллекция форм bootstrap init

0 голосов
/ 11 апреля 2020

В настоящее время я пытаюсь расширить мою symfony -форму с возможностью добавлять пользовательские записи коллекции. Я следовал Руководству https://symfony.com/doc/current/form/form_collections.html как можно ближе (кроме структуры самой формы)

(Правка: я использую Smyfony 3.4 и bootstrap 4 стиль формы)

Проблема в том, что флажки, если элемент, добавляемый в Список сбора, кажется, отсутствует инициализация bootstrap. Поэтому его вообще нельзя использовать.

Есть ли способ инициализировать флажок вручную?

Вот (упрощенный) код:

Типы форм: 

class MissionReportFormType extends AbstractType {
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder

            ->add('playerparticipations', CollectionType::class, [
                'allow_add' => true,
                'entry_type' => PlayerParticipationsFormType::class]);
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => MissionReport::class
        ]);
    }
}

class PlayerParticipationsFormType extends AbstractSfoType{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('delay', CheckboxType::class, ['required'=> false])
        ;

    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => PlayerMissionParticipation::class,
        ]);
    }

Контроллер: 

        $missionReport = new MissionReport();
        $missionReport->addPlayerparticipation(new PlayerMissionParticipation());
        return $this->render ( 'SfoLcarsBundle::punktedokument.html.twig', array (
                'form' => $this->createForm(MissionReportFormType::class,$missionReport)->createView()
        ) );

Форма 

{{ 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 начальных данных 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>

Результирующий HTML из добавленного 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>

Результат на странице - пропущены флажки

1 Ответ

0 голосов
/ 18 апреля 2020

Поскольку я не очень продвинутый веб-разработчик, и проект, который я поддерживаю, был создан другим человеком, я был не прав, подозревая флажки bootstrap.

На самом деле это был флажок jquery, который я мог инициализировать с помощью .icheck ()

Теперь это работает. Тем не менее, спасибо вам обоим :)

...