symfony collection type add javascript functions to collection fields

Question

I added some javascript to my collection fields. However i don't know how to write the javascript in a good way without being double, so every new or exiting field has this javascript included.

Thanks in advance :)

I now use this:

$('a').on('click', function() {
        setTimeout( function () {
        $('#property_propertydistances_0_icon').fontIconPicker({
            source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icomoon-home2'],
            emptyIcon: false,
            hasSearch: false
        });
            } , 300 );
});

    jQuery(document).ready(function($) {
        $('#property_propertydistances_0_icon').fontIconPicker({
            source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icon-help'],
            emptyIcon: false,
            hasSearch: false
        });
    });

$('a').on('click', function() {
        setTimeout( function () {
        $('#property_propertydistances_1_icon').fontIconPicker({
            source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icomoon-home2'],
            emptyIcon: false,
            hasSearch: false
        });
            } , 300 );
});

    jQuery(document).ready(function($) {
        $('#property_propertydistances_1_icon').fontIconPicker({
            source: fnt_icons_2,
            theme: 'fip-darkgrey'
        });
    });

I use easyadmin with that adjustmnets to fields, can only be done with formbuilder and js code.

public function buildForm(FormBuilderInterface $builder, array $options)

{

$builder

    ->add('icon', TextType::class, array('label' => 'Icon', 'empty_data' => 'icon','label_attr' => array('style'=> '') ))

    ->add('title', TextType::class, array('label' => 'Title (English)', 'empty_data' => 'name','label_attr' => array('style'=> '') ))

    ->add('title_th', TextType::class, array('label' => 'Title (Thai)', 'empty_data' => 'object','label_attr' => array('style'=> '') ))

    ->add('distance', NumberType::class, array('label' => 'Distance (km)', 'empty_data' => '4','label_attr' => array('class'=> 'col-4') ))


;

}

and then i just load also the js en css files and the text file gets overriden with that jquery function. i use https://fonticonpicker.github.io/

and this is my easyadminyaml code part

                - { property: 'propertydistances', css_class: 'propertydistancejava distance-collectionstyling',  id: 'testid1', type: 'collection', type_options: { entry_type: 'App\Form\DistanceType', by_reference: false,  attr: { name: 'testname2', id: 'testid2'} }}

Don't use an id (`'#property_propertydistances_1_icon'`) and use a class? — Fabian Schmick, Apr 09 '19 at 13:45
Or use all ids starting with `$('[id^="property_propertydistancest_"]')` — Fabian Schmick, Apr 09 '19 at 13:47
thanks for the feedback. can you be a little bit more specific? i am bad at javascript functions, loops etc. — Missblues, Apr 09 '19 at 13:49
Could you show us the responsible part in twig and the genereted html code? — Fabian Schmick, Apr 09 '19 at 13:56
i updated my post. i use a jquery plugin that overrides a input textfield — Missblues, Apr 09 '19 at 14:07

score 0 · Accepted Answer · answered Apr 10 '19 at 21:48

In your $builder, add classes to your fields. Then, in your javascript, iterate on your classes to add the JavaScript code. For example :

    $builder
        ->add('distance', TextType::class, [
            'attr' => ['class' => 'property-js'],
        ])
        ->add('image', TextType::class, [
            'attr' => ['class' => 'property-js'],
        ])

    jQuery(document).ready(function($) {
        $('.property-js').each(function(elem) {
            elem.fontIconPicker({
               source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icon-help'],
               emptyIcon: false,
               hasSearch: false
            });
        });
    });

Thanks for the feedback. i try to implemtn elem. put i got a error I changed your code a little bit and have now $this and this works finr `code`jQuery(document).ready(function($) { $('.property-js').each(function($this) { $(this).fontIconPicker({ source: pack1, emptyIcon: false, hasSearch: false }); }); });`code` — Missblues, Apr 14 '19 at 13:26

symfony collection type add javascript functions to collection fields

1 Answers1