如何解决在 Oro 平台上使用 Ajax 加载模板时如何触发页面组件事件?
我目前在 Oro 平台 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 重新加载部分时具有相同的字段呈现。
感谢您的帮助?
解决方法
感谢 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')
}
希望能帮到你! ?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。