4

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?

2

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();
        },
    });
});
  • Have you idea about how to get value on page load? – Dhaduk Mitesh Oct 9 '18 at 5:10
  • That you get from Dataprovider class – Nilesh Gosai Oct 9 '18 at 9:14
  • Can you please give me hint in comment? How to use Dataprovider? – Dhaduk Mitesh Oct 9 '18 at 9:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.