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();
        },
    });
});