Hello.
I am using ui component which triggers an Ajax call when a field "attribute_id" is changed.
However it does not trigger the Ajax call. It is called when the other field "attribute_value_id" is changed.
Do you have any suggestions to fix this issue?
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">frontname_item_form.frontname_item_form_data_source</item>
<item name="deps" xsi:type="string">frontname_item_form.frontname_item_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">General</item>
<item name="layout" xsi:type="array">
<item name="type" xsi:type="string">tabs</item>
<item name="navContainerName" xsi:type="string">left</item>
</item>
<item name="buttons" xsi:type="array">
<item name="save" xsi:type="array">
<item name="name" xsi:type="string">save</item>
<item name="label" xsi:type="string" translate="true">Save</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/save</item>
</item>
</item>
</argument>
<dataSource name="frontname_item_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Vendor\Module\Ui\DataProvider</argument>
<argument name="name" xsi:type="string">frontname_item_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="collectionFactory" xsi:type="object">Vendor\Module\Model\ResourceModel\Item\CollectionFactory</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="frontname/item/save"/>
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="general">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">General</item>
</item>
</argument>
<field name="title">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Name</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="image">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">string</item>
<item name="source" xsi:type="string">Index</item>
<item name="label" xsi:type="string" translate="true">Image</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="formElement" xsi:type="string">fileUploader</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
<item name="previewTmpl" xsi:type="string">Vendor_Module/image-preview</item>
<item name="required" xsi:type="boolean">false</item>
<item name="sortOrder" xsi:type="number">40</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="url" path="frontname/index/upload"/>
</item>
</item>
</argument>
</field>
<field name="attribute_id">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Vendor\Module\Model\Source\Myvalues</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" translate="true" xsi:type="string">Attribute</item>
<item name="component" xsi:type="string">Vendor_Module/js/form/element/options</item>
<item name="formElement" xsi:type="string">select</item>
<item name="sortOrder" xsi:type="number">210</item>
<item name="visibleValue" xsi:type="string">30</item>
</item>
</argument>
</field>
<field name="attribute_value_id" >
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Vendor\Module\Model\Source\Myvalues</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" translate="true" xsi:type="string">Attribute Value</item>
<item name="component" xsi:type="string">Vendor_Module/js/form/element/options</item>
<item name="formElement" xsi:type="string">select</item>
<item name="sortOrder" xsi:type="number">211</item>
</item>
<item name="visibleValue" xsi:type="string">20</item>
</argument>
</field>
<field name="description">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Description</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
</item>
</argument>
</field>
</fieldset>
</form>option.js
define([
'jquery',
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal',
'mage/url'
], function ($, _, uiRegistry, select, modal, url) {
'use strict';
return select.extend({
initialize: function () {
self = this;
this._super();
self.value.subscribe(function () {
self.updateValueOptions();
});
return this;
},
updateValueOptions: function () {
if(self.name != 'frontname_item_form.areas.general.general.attribute_value_id'){
return;
}
console.log(uiRegistry.get('index = attribute_id').value());
console.log(uiRegistry.get(self).value());
console.log(self.value());
if (self.value()) {
$.ajax({
url: '../../index/customajax',
type: 'post',
dataType: 'json',
cache: false,
showLoader: true,
data: {form_key: window.FORM_KEY, 'value':uiRegistry.get('index = attribute_id').value()}
}).
done(function (response) {
if (!response.error) {
console.log(response.array);
//console.log(uiRegistry.get('index = attribute_value_id').options());
uiRegistry.get('index = attribute_value_id').options(response.array);
}
});
}
else {
uiRegistry.get('index = attribute_value_id').options([]);
}
return true;
}
});
});
