it’s possible to have two collection type in one form?

i want to have two collection type for my form.
I followed the documentation https://symfony.com/doc/current/form/form_collections.html
my form

class TrickType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        
        ->add('Name', TextType::class, [
            'label' => 'Titre',
            'attr' => [
                'placeholder' => 'Titre du trick',
            ],
        ])
        ->add('description', TextareaType::class, [
            'label' => 'Description',
            'attr' => [
                'placeholder' => 'Description du trick',
            ],
        ])
        ->add('picture', FileType::class,[
            'label' => 'Image principale',
            'required' => false,
            'mapped' => false
            
        ])
        ->add('images', CollectionType::class,[
            'entry_type' => ImageType::class,
            'entry_options' => ['label' => false],
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference' => false,
            'required' => false,
        ])
        ->add('videos', CollectionType::class,[
            'entry_type' => VideoType::class,
            'entry_options' => ['label' => false],
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference' => false,
            'required' => false,
        ])
        ->add('categoryId', EntityType::class, [
            'class' => Category::class,
            'choice_label' => 'title',
            'label' => 'Cat├ęgorie',
        ])
        ->add('save', SubmitType::class)
    ;
}

My videos collection trick or images work but not both together

In my form view I insert js code like the documentation:

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/addPicture.js') }}"></script>
<script src="{{ asset('js/addVideo.js') }}"></script>
{% endblock %}

addVideo.js:

  var $collectionHolder;

 // setup an "add a tag" link
 var $addTagButton = $('<button type="button" class="add_tag_link">Add a tag</button>');
 var $newLinkLi = $('<li></li>').append($addTagButton);

jQuery(document).ready(function() {
// Get the ul that holds the collection of tags
$collectionHolder = $('ul.videos');

$collectionHolder.find('li').each(function() {
    addTagFormDeleteLink($(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);

$addTagButton.on('click', function(e) {
    // add a new tag form (see next code block)
    addTagForm($collectionHolder, $newLinkLi);
});

$removeTagButton.on('click', function(e) {
    // add a new tag form (see next code block)
    removeTagForm($collectionHolder, $removeLinkLi);
 });
});
 function addTagForm($collectionHolder, $newLinkLi) {
// Get the data-prototype explained earlier
var prototype = $collectionHolder.data('prototype');


// get the new index
var index = $collectionHolder.data('index');

var newForm = prototype;
// You need this only if you didn't set 'label' => false in your tags field in TaskType
// Replace '__name__label__' in the prototype's HTML to
// instead be a number based on how many items we have
// newForm = newForm.replace(/__name__label__/g, index);

// Replace '__name__' in the prototype's HTML to
// instead be a number based on how many items we have
newForm = newForm.replace(/__name__/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);
addTagFormDeleteLink($newFormLi);
}

 function addTagFormDeleteLink($tagFormLi) {
var $removeFormButton = $('<button type="button">Delete this tag</button>');
$tagFormLi.append($removeFormButton);

$removeFormButton.on('click', function(e) {
    // remove the li for the tag form
    $tagFormLi.remove();
});
}

i do the same for addPicture (I change jQuery(document).ready(function() { // Get the ul that holds the collection of tags $collectionHolder = $('ul.videos');for ‘ul.pictures’ )

my form trick twig:

    {{ form_start(form) }}
        {{ form_row(form.Name) }}
        {{ form_row(form.description) }}
        {{ form_row(form.picture) }}
        <ul class="images" id="image_list" data-prototype="{{ form_widget(form.images.vars.prototype)|e('html_attr') }}">
            {% for row in form.images %}
            <li>{{ form_row(row) }}</li>
            {% endfor %}
        </ul>
        <ul class="videos" id="video_list" data-prototype="{{ form_widget(form.videos.vars.prototype)|e('html_attr') }}">
            {% for row in form.videos %}
            <li>{{ form_row(row) }}</li>
            {% endfor %}
        </ul>
        {{ form_row(form.categoryId) }}
{{ form_end(form) }}

if anyone knows how to do i would be happy if they help me, i don’t really know the ajax and js code i just took over the documentation. thank

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *