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

Posted 2023-02-16

【中文标题】在 Oro 平台上使用 Ajax 加载模板时如何触发页面组件事件？

【英文标题】：How to to trigger page component events when loading template using Ajax on Oro Platform?

【发布时间】：2021-06-18 05:59:10

【问题描述】：

我目前在 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 重新加载时具有相同的字段呈现。

谢谢你的帮助？？？？

【问题讨论】：

嗨 Yoann，这里有一个与推荐解决方案类似的问题：***.com/questions/65899856/orocrm-dynamic-form

嗨 Andrey，这正是我的问题，非常感谢它帮助我解决了 content:remove 和 content:changed 这两个事件的问题。我将在我的帖子中添加一个答案，以显示与我的原始代码相关的确切修复。

【参考方案1】：

感谢 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')

希望它可以帮助！ ?