Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

Show/Hide multivalue JS

Avatar

Level 2

Hi, I'm using a custom version which is shown here: https://www.linkedin.com/pulse/aem-hideshow-drop-down-select-options-more-than-one-values-vikraman/

 

The thing is, I'm noticing that firstly the solution suggested doesn't work for me, but my customized solution works when I use it in the console upon opening the component's dialog, but it doesn't work when I include it in my project... That is, in the specific clientlib/js. Any ideas?

 

(function(document, $) {
    "use strict";

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
            showHideHandler($(".cq-dialog-dropdown-showhide"));
    });

    $(document).on("selected", ".cq-dialog-dropdown-showhide", function(e) {
            showHideHandler($(this));
    });

    function showHideHandler(el) {
        console.log("showHideHandler function called");
        el.each(function(i, element) {
            if ($(element).is("coral-select")) {
                Coral.commons.ready(element, function(component) {
                    showHide(component, element);
                    component.on("change", function() {
                        showHide(component, element);
                    });
                });
            } else {
                var component = $(element).data("select");
                if (component) {
                    showHide(component, element);
                } else {
                    //console.log("component data not found2");
                }
            }
        })
    }

    function showHide(component, element) {
        //console.log("showHide function called");
        var target = $(element).data("cqDialogDropdownShowhideTarget");
        var $target = $(target);
    
        if (target) {
            var value = "";
            if (typeof component.value !== "undefined" && component.value !== "") {
                value = component.value;
            } else if (typeof component.getValue === "function") {
                value = component.getValue();
            }    
            //console.log("Value:", value);
            $.each($target, function(index, targetElement) {
                var showhidetargetvalue = $(targetElement).data('showhidetargetvalue');
                var values = showhidetargetvalue.split(',');
                //console.log("Target value:", showhidetargetvalue);
                if (values.includes(value)) {
                    //console.log("Element should be shown");
                    $(targetElement).removeClass("hide");
                }  
            });
            $target.filter(".hide").prop("checked", false);
            $target.filter('.radioButtonShowHide').not('.hide').first().prop('checked', true);

        }
    }

})(document, Granite.$);
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

For example:

AsifChowdhury_0-1714038948657.png

You can give a unique category for your custom clientlib then

AsifChowdhury_1-1714039025133.png

You can call that clientlib in the particular component's dialog xml using extraClientlibs

Or you can just say the clientlib will load globally while any component's dialog been triggered by defining the category like below.

AsifChowdhury_2-1714039169854.png

 

View solution in original post

4 Replies

Avatar

Community Advisor

Hi @Tenu 

 

It seems your js is not loading while your component is loading. You can try below approaches.

 

1) You need to include this clientlib in the particular component's dialog xml using extraClientlibs="show-hide-clientlib-category" then this js will load with you component. 

 

2) Another approach is you can load this clientlib as author clientlib everytime by saying it's categories="[cq.authoring.dialog]". As AEM is loading this category "cq.authoring.dialog" everytime when a dialog is opened. So you can assign this category to your clientlib as well.

 

Thanks

Asif Ahmed

Avatar

Level 2

Exactly where should I include these fields or features you mentioned? Greetings and thanks.

Avatar

Correct answer by
Community Advisor

For example:

AsifChowdhury_0-1714038948657.png

You can give a unique category for your custom clientlib then

AsifChowdhury_1-1714039025133.png

You can call that clientlib in the particular component's dialog xml using extraClientlibs

Or you can just say the clientlib will load globally while any component's dialog been triggered by defining the category like below.

AsifChowdhury_2-1714039169854.png

 

Avatar

Level 8

Hi @Tenu , Please check whether your JS is loading or not when you open the dialog.

If not, check whether the clientlib category is included as part of the extraClientlibs property in your component or not as mentioned in the document.