Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Coral UI 3 : How to populate option in second selection based on selection change event of first drop-down

Avatar

Level 2

I have two drop-down in dialog, based on first dialog select change event I have to populate the value in second drop-down.

Framework : Coral UI 3

AEM version : 6.3 SP1

1 Accepted Solution

Avatar

Correct answer by
Level 2

We achieved this functionality by Following listener.

1. Add granite:class property to selector radio group and value will be "cq-dialog-dropdown-selector".

2. Add granite:data node under selector node.

3. Add cq-dialog-dropdown-target property to granite:data node and assign some unique css class name that you can give it to target element

4. Add granite:class property to target element and assign that unique class name.

(function (document, $, Coral) {

    "use strict";

    var prevRadioGroupVal;

    var SELECTOR_DROP_DOWN_CLASS = ".cq-dialog-dropdown-selector";

    $( document ).on("foundation-contentloaded", function(e) {

$(SELECTOR_DROP_DOWN_CLASS, e.target).each(function (i, element) {

            var target = $(element).data("cq-dialog-dropdown-target");

            Coral.commons.ready(element, function (component) {

                $(component).on("change",function () {

                   fillData($(component),target);

                });

            });

fillData($(element), target);

        });

    });

    function fillData(component, target) {

        var value = component != null ? component.value : $(target).val();

        if(!value) {

            var tempCheckBoxArray = component.find("[checked]");

            if(tempCheckBoxArray.length > 1)

            {

                for (var i = 0; i < tempCheckBoxArray.length; i++) {

                    if( $(tempCheckBoxArray[i]).val() != prevRadioGroupVal)

                    {

                        value = $(tempCheckBoxArray[i]).val();

                    }

                }

            }

            else

           {

                value = component.find("[checked]").val();

            }

        }

     var prevSelectedVal = $(target).find('coral-select-item').filter(':selected').val();

        $(target).find("coral-select-item").remove();

        for(var i=1;i<=value;i++) {

            if(i==prevSelectedVal)

            {

                $(target).append("<coral-select-item value="+i+" selected>"+i+"</coral-select-item>");

            }

            else

            {

                $(target).append("<coral-select-item value="+i+">"+i+"</coral-select-item>");

            }

        }

        if(value==1)

        {

            $(target).parent().addClass("hide");

        }

        else

        {

            $(target).parent().removeClass("hide");

        }

        prevRadioGroupVal = value;

    }

})(document, Granite.$, Coral);

View solution in original post

8 Replies

Avatar

Level 8

Using the above link, write a listener and use that in your component

Avatar

Level 10

That is the correct way to proceed in this use case.

Avatar

Level 2

I wrote below listener; data population is working fine but drop-down is not retaining.

(function (document, $, Coral) {

    "use strict";

    var SELECTOR_DROP_DOWN_CLASS = ".cq-dialog-dropdown-selector";

    $( document ).on("foundation-contentloaded", function(e) {

$(SELECTOR_DROP_DOWN_CLASS, e.target).each(function (i, element) {

var target = $(element).data("cq-dialog-dropdown-target");

                Coral.commons.ready(element, function (component) {

                    component.on("change", function () {

                       fillData(component,target);

                    });

                });

        });

        fillData($(".cq-dialog-dropdown-selector", e.target));

    });

    function fillData(component, target) {

        var value = component.value;

        if(!value) {

var options = $(component).find('coral-select-item');

            if(options && options.length > 0) {

value = $(options[0]).val();

            }

        }

$(target).each(function (i, element) {

            console.log(element);

            $(element).find("coral-select-item").remove();

for(var i=1;i<=value;i++)

            {

$(element).append("<coral-select-item value="+i+">"+i+"</coral-select-item>");

            }

        });

      }

})(document, Granite.$, Coral);

Avatar

Level 10

Is the 2nd field populated with the value?

Avatar

Level 2

Yes, Value is populated in second field. but it is not retaining the value.

Avatar

Correct answer by
Level 2

We achieved this functionality by Following listener.

1. Add granite:class property to selector radio group and value will be "cq-dialog-dropdown-selector".

2. Add granite:data node under selector node.

3. Add cq-dialog-dropdown-target property to granite:data node and assign some unique css class name that you can give it to target element

4. Add granite:class property to target element and assign that unique class name.

(function (document, $, Coral) {

    "use strict";

    var prevRadioGroupVal;

    var SELECTOR_DROP_DOWN_CLASS = ".cq-dialog-dropdown-selector";

    $( document ).on("foundation-contentloaded", function(e) {

$(SELECTOR_DROP_DOWN_CLASS, e.target).each(function (i, element) {

            var target = $(element).data("cq-dialog-dropdown-target");

            Coral.commons.ready(element, function (component) {

                $(component).on("change",function () {

                   fillData($(component),target);

                });

            });

fillData($(element), target);

        });

    });

    function fillData(component, target) {

        var value = component != null ? component.value : $(target).val();

        if(!value) {

            var tempCheckBoxArray = component.find("[checked]");

            if(tempCheckBoxArray.length > 1)

            {

                for (var i = 0; i < tempCheckBoxArray.length; i++) {

                    if( $(tempCheckBoxArray[i]).val() != prevRadioGroupVal)

                    {

                        value = $(tempCheckBoxArray[i]).val();

                    }

                }

            }

            else

           {

                value = component.find("[checked]").val();

            }

        }

     var prevSelectedVal = $(target).find('coral-select-item').filter(':selected').val();

        $(target).find("coral-select-item").remove();

        for(var i=1;i<=value;i++) {

            if(i==prevSelectedVal)

            {

                $(target).append("<coral-select-item value="+i+" selected>"+i+"</coral-select-item>");

            }

            else

            {

                $(target).append("<coral-select-item value="+i+">"+i+"</coral-select-item>");

            }

        }

        if(value==1)

        {

            $(target).parent().addClass("hide");

        }

        else

        {

            $(target).parent().removeClass("hide");

        }

        prevRadioGroupVal = value;

    }

})(document, Granite.$, Coral);

Avatar

Level 2

This is just a example implementation, it will differ as per the requirement.