javascriptajaxsymfony-formsorocrmorocommerce

How to to trigger page component events when loading template using Ajax on Oro Platform?


I'm currently facing an issue on Oro Platform v.4.1.10.

I have a specific form page where I'm performing an ajax reload on a specific field change.

The thing is that everything is working well except that the CSS and JS are not applied to my ajax section when reloaded.

When I first load the page, everything is OK :

first load render

When the section is reload using Ajax :

ajax reload render

An OroDateTimeType field is used in the reloaded section, and according to my issue, the datepicker doesn't init on it.


Some details about the way my Ajax call is performed :

define(function (require) {
    'use strict';

    let SinisterAjaxRepairman,
        BaseView = require('oroui/js/app/views/base/view');

    SinisterAjaxRepairman = BaseView.extend({
        autoRender: true,

        /**
         * Initializes SinisterAjaxRepairman component
         *
         * @param {Object} options
         */
        initialize: function (options) {
            // assign options to component object
            this.$elem = options._sourceElement;
            delete options._sourceElement;
            SinisterAjaxRepairman.__super__.initialize.call(this, options);

            this.options = options;
        },

        /**
         * Renders the view - add event listeners here
         */
        render: function () {
            $(document).ready(function() {
                let sectionTrigger = $('input.repair-section-trigger');
                let sectionTargetWrapper = $('.repair-section-content');
                sectionTrigger.on('click', function(e) {
                    $.ajax({
                        url: sectionTrigger.data('update-url'),
                        data: {
                            plannedRepair: sectionTrigger.is(':checked') ? 1 : 0,
                            id: sectionTrigger.data('sinister-id') ? sectionTrigger.data('sinister-id') : 0
                        },
                        success: function (html) {
                            if (!html) {
                                sectionTargetWrapper.html('').addClass('d-none');
                                return;
                            }
                            // Replace the current field and show
                            sectionTargetWrapper
                                .html(html)
                                .removeClass('d-none')
                        }
                    });
                });
            });

            return SinisterAjaxRepairman.__super__.render.call(this);
        },

        /**
         * Disposes the view - remove event listeners here
         */
        dispose: function () {
            if (this.disposed) {
                // the view is already removed
                return;
            }
            SinisterAjaxRepairman.__super__.dispose.call(this);
        }
    });

    return SinisterAjaxRepairman;
});

The loaded template just contains the form row to update in the related section :

{{ form_row(form.repairman) }}
{{ form_row(form.reparationDate) }}

I think that my issue is related to the page load events used by Oro to trigger the page-component events and update their contents but I'm stuck at this point, I don't find how to trigger programmatically this update on my Ajax success code, in order to have the same rendering of the fields on an initial Page load and an Ajax reload of the section.

Thank you for your help 🙂


Solution

  • The final fix, that I found thanks to Andrey answer, was to update the JS file like this, with the addition of content:remove and content:changed events on ajax response (success section) :

    success: function (html) {
        if (!html) {
            sectionTargetWrapper
                .trigger('content:remove')
                .html('')
                .trigger('content:changed')
                .addClass('d-none');
            return;
        }
        // Replace the current field and show
        sectionTargetWrapper
            .trigger('content:remove')
            .html(html)
            .trigger('content:changed')
            .removeClass('d-none')
    }
    

    Hope it could help ! 🙂