magento2:使用Ajax加载一个自定义组件
问题描述:
我一直在为此奋斗...... 对于管理扩展,我试图加载一个带有Ajax的UI组件以显示在选项卡中。 uiComponent被正确加载,但似乎没有被客户端敲除逻辑完全处理。magento2:使用Ajax加载一个自定义组件
namespace Man4x\MondialRelay2\Block\Adminhtml\Shipping;
class Tabs
extends \Magento\Backend\Block\Widget\Tabs {
protected function _construct()
{
parent::_construct();
$this->setId('mondialrelay2_shipping_tabs');
$this->setDestElementId('container');
$this->setTitle(__('MondialRelay'));
}
protected function _beforeToHtml()
{
$this->addTab(
'mass_shipping',
[
'label' => __('Mass Shipping'),
'title' => __('Mass Shipping'),
'url' => $this->getUrl('*/*/massshipping', ['_current' => true]),
'class' => 'ajax'
]
);
return parent::_beforeToHtml();
}
}
这里是简单的控制器布局:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<container name="root" label="Root">
<uiComponent name="mondialrelay2_massshipping_grid"/>
</container>
注:此自定义UIComponent位于在一个标准的加载时(即,非AJAX)方式
当完美的功能跟踪AJAX响应,我可以看到加载了uiComponent的正确HTML代码(包括Magento特定的“x-magento-init”标签)。然后通过jquery-ui回调进行处理:
this.xhr = $.ajax(this._ajaxSettings(anchor, event, eventData));
// support: jQuery <1.8
// jQuery <1.8 returns false if the request is canceled in beforeSend,
// but as of 1.8, $.ajax() always returns a jqXHR object.
if (this.xhr && this.xhr.statusText !== "canceled") {
tab.addClass("ui-tabs-loading");
panel.attr("aria-busy", "true");
this.xhr
.success(function(response) {
// support: jQuery <1.8
// http://bugs.jquery.com/ticket/11778
setTimeout(function() {
panel.html(response);
that._trigger("load", event, eventData);
}, 1);
})
...用于加载的HTML代码插入到容器标记中。 然后,一堆回调和挂钩在js模块丛林中进行处理。 A“contentUpdated”事件终于引发,引起:
/**
* Init components inside of dynamically updated elements
*/
$('body').on('contentUpdated', function() {
if (mage) {
mage.apply();
}
});
return $.mage;
}));
法师/应用/ main.js和法师/应用/ scripts.js中,然后正确调用(如浏览器控制台追踪到),但.. 。 什么都没发生。我装
<script type="x-magento-init">
消失了,但我的组件JS逻辑不处理的。
任何启示将不胜感激。 PS:经过深入调查,似乎uiComponent的组件JS文件实际上是加载的,但不是它们的模板!
答
我遇到了同样的问题,你在类似的情况。在这种情况下,绑定似乎不适用,或者至少不适用。为了解决这个问题,而不会改变我使出了一些附加的XML模板,你的情况,这可能是:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<container name="root" label="Root" htmlTag="div" htmlId="mondialrelay2">
<uiComponent name="mondialrelay2_massshipping_grid"/>
<block class="Magento\Framework\View\Element\Text" name="ajax_ui_component_fix">
<action method="setText">
<argument name="text" xsi:type="string"><![CDATA[<script>
require(['jquery'], function ($) {
$('#mondialrelay2').applyBindings();
});
</script>]]></argument>
</action>
</block>
</container>
PS:再过两天,没有任何固定... Magento2前台JS逻辑是一个纯粹的地狱:30级调用堆栈,无限的承诺和关闭。 – Man4x
要自杀或交谈去园艺... – Man4x
好吧...一个星期后我放弃了。 :(((((( )在研究产品页面的“相关产品”ajax调用之后,我想我必须在表单中包含AJAX加载的组件,以便将componentRF方法的component/form/insert.js触发,但调试Magento2客户端逻辑是一个纯粹的瘟疫! 如果有人可以帮助我这样一个简单的情况下,我真的很感激... – Man4x