Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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 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.