如何在Oro平台上使用Ajax加载模板时触发页面组件事件？

Question

我目前在 Oro Platform v.4.1.10 上遇到问题。

我有一个特定的表单页面，我在其中对特定字段更改执行 ajax 重新加载。

除了重新加载时 CSS 和 JS 未应用于我的 ajax 部分外，其他一切正常。

当我第一次加载页面时，一切正常:

当使用 Ajax 重新加载该部分时：

重新加载部分使用了一个OroDateTimeType字段，根据我的问题，日期选择器没有在上面初始化。

关于我的 Ajax 呼叫执行方式的一些细节：

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;
});

加载的模板仅包含要在相关部分更新的表单行：

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

我认为我的问题与 Oro 用于触发页面组件事件并更新其内容的页面加载事件有关，但我卡在了这一点上，我找不到如何以编程方式触发这个更新我的 Ajax 成功代码，以便在初始页面加载和 Ajax 重新加载该部分时具有相同的字段呈现。

感谢您的帮助

Answer 1

最后的修复，我发现感谢安德烈的回答，是像这样更新 JS 文件，在 ajax 响应上添加 content:remove 和 content:changed 事件（成功部分）：

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')
}

希望对您有所帮助！

如何在Oro平台上使用Ajax加载模板时触发页面组件事件？

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

javascript

ajax

symfony-forms

orocrm

orocommerce