Radiobutton show/hide show as default marked?

[Tenu]

Hello, I have been looking into how to create a show/hide radiobutton with multiple values.

The functionality is correct so far after many issues, little documentation, and asking many times in this forum.

Thank you very much. The issue is that my radiobuttons are hidden by default and not selected, but if one of the saved options is already selected in my component and I open the dialog, the radiobuttons do not show by default until I open and close my select again or change the option. Any solution? Here is my code js & xml:

<themeColor jcr:primaryType="nt:unstructured"
									sling:resourceType="granite/ui/components/foundation/form/select"
									fieldLabel="Tema" 
									name="./themeColor"
									class="cq-dialog-dropdown-showhide"
									cq-dialog-dropdown-showhide-target=".radioButtonShowHide">
								<items jcr:primaryType="nt:unstructured">
									<select
											jcr:primaryType="nt:unstructured"
											text="Selecciona un tema"
											value=""/>
									<primaryBg
											jcr:primaryType="nt:unstructured"
											text="Primary backgroung"
											value="primary-bg"/>
									<secondaryBg
											jcr:primaryType="nt:unstructured"
											text="Secondary backgroung"
											value="secondary-bg"/>
									<tertiaryBg
											jcr:primaryType="nt:unstructured"
											text="Tertiary backgroung"
											value="tertiary-bg"/>
									<inverseBg
											jcr:primaryType="nt:unstructured"
											text="Inverse backgroung"
											value="inverse-bg"/>
									<disabledBg
											jcr:primaryType="nt:unstructured"
											text="Disabled backgroung"
											value="disabled-bg"/>
									<brandPrimaryBg
											jcr:primaryType="nt:unstructured"
											text="Brand primary backgroung"
											value="brand-primary-bg"/>
									<brandSecondaryBg
											jcr:primaryType="nt:unstructured"
											text="Brand secondary backgroung"
											value="brand-secondary-bg"/>
									<brandTertiaryBg
											jcr:primaryType="nt:unstructured"
											text="Brand tertiary backgroung"
											value="brand-tertiary-bg"/>
								</items>
							</themeColor>
							<radiogroup-columns
								jcr:primaryType="nt:unstructured"
								sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
								fieldLabel="Color de texto"
								name="./radioColor"
								vertical="{Boolean}false">
									<items jcr:primaryType="nt:unstructured">
										<radio1
											jcr:primaryType="nt:unstructured"
											text="White font color"
											value="white-font-color"
											granite:class="hide radioButtonShowHide">
											<granite:data jcr:primaryType="nt:unstructured"
												showhidetargetvalue="inverse-bg,brand-primary-bg,brand-secondary-bg"/>
										</radio1>											
										<radio2
											jcr:primaryType="nt:unstructured"
											text="Black font color"
											granite:class="hide radioButtonShowHide"
											value="black-font-color"
											checked="{Boolean}true">
											<granite:data jcr:primaryType="nt:unstructured"
											showhidetargetvalue="primary-bg,brand-primary-bg,brand-tertiary-bg"/>
										</radio2>	
										<radio3
											jcr:primaryType="nt:unstructured"
											text="Content interactive primary font color"
											value="content-inter-primary-font-color"
											granite:class="hide radioButtonShowHide">
											<granite:data jcr:primaryType="nt:unstructured"
												showhidetargetvalue="secondary-bg,tertiary-bg,disabled-bg,brand-primary-bg,brand-tertiary-bg"/>
										</radio3>
									</items>
							</radiogroup-columns>

(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.$);

[HrishikeshKa]

Hi @Tenu ,

Based on the provided code, it seems that the radio buttons are hidden by default and not selected when the dialog is opened. However, if one of the saved options is already selected in the component, the radio buttons do not show by default until the select is opened and closed again or the option is changed.

To address this issue, you can modify the showHideHandler function to trigger the change event on the select component when the dialog is loaded. This will ensure that the appropriate radio button is shown based on the selected option.

Here's an updated version of the showHideHandler function:

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);
                });
            });
            // Trigger the change event on the select component
            $(element).trigger("change");
        } else {
            var component = $(element).data("select");
            if (component) {
                showHide(component, element);
            } else {
                //console.log("component data not found2");
            }
        }
    })
}

By triggering the change event on the select component, the showHide function will be called, and the appropriate radio button will be shown based on the selected option.

Note: Make sure to replace the existing showHideHandler function in your code with the updated version provided above.

[Tenu]

Hello, it didn't work for me and I still have exactly the same behavior.

[sravs]

@Tenu , try removing the below snippet from dialog .content.xml which is having empty value

<select
											jcr:primaryType="nt:unstructured"
											text="Selecciona un tema"
											value=""/>

[Tenu]

Hi, I tried it and encountered the same issue. Anyway, the problem is that when I close and reopen the dialog, other variables that are selected show as hidden.

[kautuk_sahni]

@Tenu Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!