For Ui Component admin form Field with ajax updating the select value

Question

I have a select field in the UI component, on the changing the select field with ajax how to load the next select field.in the admin side?

Answer 1

Please follow below steps.

Step-1: create select box element like below code in your ui_component form xml

 <field name="select_box_1">
 <argument name="data" xsi:type="array">
 <item name="options" xsi:type="object">Namespace\Module\Model\Config\Source\SelectBoxOption</item>
 <item name="config" xsi:type="array">
 <item name="dataType" xsi:type="string">text</item>
 <item name="label" xsi:type="string" translate="true">Select Option</item>
 <item name="component" xsi:type="string">Namespace_Module/js/form/element/select-option</item>
 <item name="formElement" xsi:type="string">select</item>
 <item name="source" xsi:type="string">modulename</item>
 <item name="dataScope" xsi:type="string">select_box_1</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 </item>
 </argument>
 </field>
<field name="select_box_2">
 <argument name="data" xsi:type="array">
 <item name="options" xsi:type="object">Namespace\Module\Model\Config\Source\SelectBoxTwoOption</item>
 <item name="config" xsi:type="array">
 <item name="dataType" xsi:type="string">text</item>
 <item name="label" xsi:type="string" translate="true">Select Option</item>
 <item name="formElement" xsi:type="string">select</item>
 <item name="source" xsi:type="string">modulename</item>
 <item name="dataScope" xsi:type="string">select_box_2</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 </item>
 </argument>
 </field>

Step-2: create select-option.js in Namespace/Module/view/adminhtml/web/js/form/element and paste below code in file:

define([
 'jquery',
 'underscore',
 'uiRegistry',
 'Magento_Ui/js/form/element/select',
 'Magento_Ui/js/modal/modal',
], function (,ドル _, uiRegistry, select, modal) {
 'use strict';
 return select.extend({
 /**
 * On value change handler.
 *
 * @param {String} value
 */
 onUpdate: function (value)
 {
 if (value != 'undefined')
 {
 //Do your Ajx stuff here
 }
 return this._super();
 },
 });
});

• Dhaduk Mitesh: Have you idea about how to get value on page load?
• Nilesh Gosai: That you get from Dataprovider class
• Dhaduk Mitesh: Can you please give me hint in comment? How to use Dataprovider?