2

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

Yoann Vié
  • 73
  • 5
  • 1
    Hi Yoann, Here is a similar question with the recommended solution: https://stackoverflow.com/questions/65899856/orocrm-dynamic-form – Andrey Yatsenko Mar 22 '21 at 11:00
  • 1
    Hi Andrey, it was exactly my problem, thanks you a lot it helps me to fix the issue with both events `content:remove` and `content:changed`. I will add an answer to my post in order to show the exact fix in relation to my original code. – Yoann Vié Mar 25 '21 at 10:16

1 Answers1

0

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 !

Yoann Vié
  • 73
  • 5