Custom add button location not triggering

[rubendehaas]

As is explained in the guide for implementing an add button on a custom location. I placed a button, but the event is not being triggered.
Am I missing additional steps?

HTML:

<a href="#" data-collection="pageTranslations-collection" class="collection-action collection-add btn btn-success">Add element to collection A</a>

JavaScript:

$('.pageTranslations-collection').collection({
        prefix: 'parent',
        allow_up: false,
        allow_down: false,
        custom_add_location: true,
        children: [{
            selector: '.box-properties',
            prefix: 'child',
            add_at_the_end: true
        }]
    });

FormType:

$builder
            ->add('pageTranslations', CollectionType::class, array(
                'entry_type'    => PageTranslationType::class,
                'entry_options' => array(
                    'label' => 'Value',
                ),
                'label'         => 'Add, move, remove values and press Submit.',
                'allow_add'     => true,
                'allow_delete'  => true,
                'prototype'     => true,
                'prototype_name' => '__parent_name__',
                'required'      => false,
                'attr'          => array(
                    'class' => 'pageTranslations-collection',
                ),
            ))
        ;

[ninsuo]

Yes, data-collection="" should refer to the id of your collection, not its selector (I'll need to clarify the doc).

Please try with (assuming your form variable is named form):

data-collection="{{ form.pageTranslations.vars.id }}"

[rubendehaas]

Thank you for your advice. However changing my JavaScript to this seemed to make it work:

$('.pageTranslations-collection').collection({
        //prefix: 'parent',
        allow_up: false,
        allow_down: false,
        custom_add_location: false,
        children: [{
            selector: '.box-properties',
            prefix: 'child',
            add_at_the_end: true
        }]
    });

For some reason I had to set the "custom_add_location" property to "false" and remove the "prefix" property. Now I am able to use the custom button.

[ZeroGravity-82]

Hi @rubendehaas.

I think that classes of your anchor tag should contain prefix. So try to change your HTML to something like this: <a href="#" data-collection="pageTranslations-collection" class="parent-action parent-add btn btn-success">Add element to collection A</a>.

And revert your settings back: prefix: 'parent', custom_add_location: true

[rubendehaas]

Thank you all for your feedback, I will close this issue as the issue has been resolved. I am using an adapted implementation of the custom add button for personal preferences in the project I am working on. Following the docs should be more than enough for the regular implementation.

[ninsuo]

Reopening, I'd need to update the doc 👍

[glennthehuman]

The example is not working: https://symfony-collection.fuz.org/symfony3/options/buttons-custom-location

[ninsuo]

Thank you ! I will check once I will be on vacations. Alain

[DylanDelobel]

The example is still not working

[phiLuee]

Sadly still not working. Even the workarounds didn't work for me.

[kshaw77814]

The documentation on this is very unclear but I eventually figured it out. The class names on the custom button needed to be in the format of your_collection_id-collection-action. The collection id usually being the ID set on the same element as the prototype.

Example:

<div id="my_collection" class="collection" data-prototype="...">
</div>

<button data-collection="my_collection" class="my_collection-collection-action my_collection-collection-add  btn btn-success">Add <i class="fa fa-plus"></i> </button>

Hope this helps!