Radiobutton show/hide show as default marked?
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.$);
