how to add javascript after creating a new row in Sonata Type Collection?

Question

I've noticed that is on file ../vendor/sonata-project/doctrine-orm-admin-bundle/Sonata/DoctrineORMAdminBundle/Resources/views/CRUD/edit_orm_one_association_script.html.twig, where it creates a new row when you click on the link add, specifically in this code:

// the ajax post
    jQuery(form).ajaxSubmit({
        url: '{{ url('sonata_admin_append_form_element', {
            'code':      sonata_admin.admin.root.code,
            'elementId': id,
            'objectId':  sonata_admin.admin.root.id(sonata_admin.admin.root.subject),
            'uniqid':    sonata_admin.admin.root.uniqid
        } + sonata_admin.field_description.getOption('link_parameters', {})) }}',
        type: "POST",
        dataType: 'html',
        data: { _xml_http_request: true },
        success: function(html) {

            jQuery('#field_container_{{ id }}').replaceWith(html); // replace the html
            if(jQuery('input[type="file"]', form).length > 0) {
                jQuery(form).attr('enctype', 'multipart/form-data');
                jQuery(form).attr('encoding', 'multipart/form-data');
            }
            jQuery('#sonata-ba-field-container-{{ id }}').trigger('sonata.add_element');
            jQuery('#field_container_{{ id }}').trigger('sonata.add_element');

        }
    });

    return false;
}; 

I would like to know how I can implement the trigger:

jQuery('#field_container_{{ id }}').trigger('sonata.add_element'); 

To add javascript! after creating a new row in Sonata Type Collection.

In the documentation says: TIP: A jQuery event is fired after a row has been added(sonata-collection-item-added) or deleted(sonata-collection-item-deleted). You can bind to them to trigger some custom javascript imported into your templates(eg: add a calendar widget to a just added date field)

Any help is welcome!

Answer 1

Ok,thank you very much for your answer @Tautrimas Pajaskas, The solution is as follows:

 <script type="text/javascript">
    $('div[id$=_empDomicilios]').on('sonata.add_element', function(event) {

        alert('trigger is fired ');
        // insert here your code
    });
 </script> 

API of Jquery says: As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

If you indeed can send other parameters from the trigger, as follows:

jQuery('#field_container_{{ id }}').trigger('sonata.add_element', ['{{ id }}','{{ sonata_admin.admin.root.id(sonata_admin.admin.root.subject) }}', '{{ sonata_admin.admin.root.uniqid }}']); 

Then your javascript code looks like this:

<script type="text/javascript">
    $('div[id$=_empDomicilios]').on('sonata.add_element', function(event, elementId, objectId, uniqid) {

            alert('trigger is fired '):
            alert('ElementId: '+ elementId);
            alert('ObjectId: '+ objectId);
            alert('Uniqid: '+ uniqid);
            // insert here your code
    });
 </script> 

Note: I have used for the example a div with a id attribute value ending with "_empDomicilios".

Answer 2

Just do a

jQuery('[id^="field_container_"][id$="<insert element name here>"]').live('sonata.add_element', function(event) { alert('foo bar'); })

Remember to test if your jQuery selector works as expected first. You don't have to use complicated id^= and id$= selectors, if you can manage to extract that uniqId from the form elements inside your Javascript.

Answer 3

For jQuery >= 1.7 you can use this method, where idField is the name used in sonataAdmin collection.

<script type="text/javascript">
    $(document).ready(function() {
        $('body').on('sonata.add_element','#field_container_{{ admin.uniqid }}_idField', function(e) {
            //Code ...
        });
    });
</script>

For jQuery < 1.7 you can use this method, where idField is the name used in sonataAdmin collection.

<script type="text/javascript">
    $(document).ready(function() {
        $('#field_container_{{ admin.uniqid }}_idField').live('sonata.add_element', function(e) {
            //Code ...
        });
    });
</script>

With the complete selector you'll avoid run twice the code.

Answer 4

The answer of @Emerson Minero didn't work for me, until I took the code out of $(document).ready() and adapted it to

$(document).on('sonata.add_element', function() {
    console.log('toto');
});`