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

编程问答 2022-05-17

问题描述

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

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

问题是，除了 CSS 和 JS 在重新加载时未应用于我的 ajax 部分之外，一切都运行良好。

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

first load render

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

ajax reload render

在重新加载的部分中使用了 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 重新加载部分时具有相同的字段呈现。

感谢您的帮助?

解决方法

感谢 Andrey 的回答，我找到的最终解决方法是像这样更新 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')
}

希望能帮到你！ ?

ajaxjavascriptorocommerceorocrmsymfony-forms