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