1

Preconditions (*)

Magento 2.3.3

Description (*)

I have 2 dropdown in UI form. First is simple dropdown, 2nd is UI multiselect dropdown.

In 1st dropdown there are dropdown type product attribute list. In 2nd, There are attribute options list which was selected in 1st dropdown.

Expected result (*)

When I page load, attribute options list (2nd UI multiselect dropdown) should be display which was selected attribute (1st dropdown)

Actual result (*)

Sometimes, working perfect and sometimes, display all attribute options list. Because, UI multiselect element render first when page load.


UI Form Code

<field name="attribute_id">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Source\AttributeList</item>
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Attribute</item>
            <item name="component" xsi:type="string">Vendor_Module/js/form/element/attribute</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">general</item>
            <item name="dataScope" xsi:type="string">attribute_id</item>
            <item name="sortOrder" xsi:type="number">60</item>
            <item name="mapper" xsi:type="object">Vendor\Module\Model\Source\Mapper</item>
        </item>
    </argument>
</field>
<field name="attribute_options_list">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Source\AttributeListOptions</item>
        <item name="config" xsi:type="array">
            <item name="additionalClasses" xsi:type="string">required</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Attribute Options List</item>
            <item name="componentType" xsi:type="string">field</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Vendor_Module/js/form/element/ui-select-attribute-filter</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">attribute_options_list</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="sortOrder" xsi:type="number">80</item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">false</item>
            </item>
            <item name="listens" xsi:type="array">
                <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
            </item>
        </item>
    </argument>
</field>

JS code

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
define(['jquery',
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/ui-select'
    ], function($, _, uiRegistry, ui_select) {
    return ui_select.extend({
        initialize: function () {
            this._super();
            var field = uiRegistry.get('index = attribute_id');
            console.log(field.value());
        }
    })
})

How to solve this issue that everytime, I get value when initialize element?

Any help would be appreciated.

Thanks !!

1 Answer 1

0

Update your js code with this one

/**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
    define(['jquery',
        'underscore',
        'uiRegistry',
        'Magento_Ui/js/form/element/ui-select'
        ], function($, _, uiRegistry, ui_select) {
        return ui_select.extend({


            initialize: function () {

               this._super();
               this.fieldDepend(this.value());
               return this;

           },

           fieldDepend: function (value)
            {

                $(document).ready(function(){

                    var i = setInterval(function(){
                        if (document.getElementById('attribute_id')) {

                            var field = uiRegistry.get('index = attribute_id');
                            console.log(field.value());
                            clearInterval(i);
                        } 
                    });

                });
            }
        })
    })

Hope it works

4
  • SetInterval I know about that. I want to set something magento proper way. Jan 10, 2020 at 7:30
  • ok if you found please post it here as well
    – ASQ
    Jan 10, 2020 at 7:32
  • This code also not working. Console log not available. Jan 10, 2020 at 7:38
  • compare the id of the element you want to load first to the id('attribute_id) used in the function, if not correct please update
    – ASQ
    Jan 10, 2020 at 9:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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