OroCrm: Dynamic Form

Question

I'm trying to make a form dynamic working with Oro 3.1.1 and Symfony 3.4. To make the form dynamic I post the form with ajax, use some listeners and update the page with the response html fields, as described in Symfony docs: https://symfony.com/doc/current/form/dynamic_form_modification.html#dynamic-generation-for-submitted-forms

My problem is that some fields are select2 or autocomplete, so they are associated to a data-page-component-module. I've understood that these fields are intitialised on the page first rendering, via the PageComponent render() function, but this runs at the page loading and I don't understand how I can render the new fields that come from the ajax response.

I haven't found anything about re-rendering a page component module in the documentation, is there a way that I can trigger page:update event on the PageController? If so, how can I get a handle on the controller?

Basically the js code is something like this:

        require(['jquery'], function($) {
            $(document).ready(() => {
                const $field1 = $('[name="field1"]');
                // ...
                const $token = $('[name="_token"]');
                const controlGroup = '.control-group';

                fieldsToReplace = [
                    'field2',
                    // ...
                ];

                const updateForm = () => {
                    const $form = $(this).closest('form');
                    const data = {};

                    data[$token.attr('name')] = $token.val();
                    data[$field1.attr('name')] = $field1.val();
                    // ...

                    $.post($form.attr('action'), data).then((response) => {
                        fieldsToReplace.forEach((field) => {
                            $(`[name="${field}"]`)
                                .closest(controlGroup)
                                .replaceWith($(response).find(`[name="${field}"]`).closest(controlGroup));
                        });

                        $field1 = $('[name="field1"]');
                        $field1.on('change', updateForm);
                    });
                };

                $field1.on('change', updateForm);
            });
        });

so I would like to trigger an event to rebuild the new fields after the replacements from the html from the response.

Thanks in advance

Answer 1

According to examples in the core, you have to trigger content:changed event on a new HTML element. As an example, see https://github.com/oroinc/orocommerce/blob/89631c4/src/Oro/Bundle/PromotionBundle/Resources/public/js/app/views/discount-options-view.js#L49-L53