when we fill form fields in dialog and reopen the dialog, form fields are missing.
these form fields are visible based on dropdown selection.
below is the code used for showhiding it.
Can someone help in fixing this refresh issue while opening dialog with form fields?
our doubt is with removing hide class with below line
$target.filter("[data-showhidetargetvalue='" + visibleField + "']").removeClass("hide");
/**
* Extension to the standard dropdown/select component. It enabled hidding/unhidding of other components based on the
* selection made in the dropdown/select.
*
* How to use:
*
* - add the class cq-dialog-dropdown-showhide to the dropdown/select element
* - add the data attribute cq-dialog-dropdown-showhide-target to the dropdown/select element, value should be the
* selector, usually a specific class name, to find all possible target elements that can be shown/hidden.
* - add the data visible-fields to each dropdown/select ITEM
* - add the target class to each target component that can be shown/hidden
* - add the class hidden to each target component to make them initially hidden
* - add the attribute showhidetargetvalue to each target component, the value should be one of the visible-fields
* of the select option that will unhide this element.
*
* E.g.: /apps/orbit/components/content/_cq_dialog/.content.xml
*/
(function (document, $) {
"use strict";
// when dialog gets injected
$(document).on("foundation-contentloaded", function (e) {
// if there is already an initial value make sure the according target element becomes visible
showHideHandler($(".cq-dialog-dropdown-showhide", e.target));
});
// when a dropdown item is selected
$(document).on("selected", ".cq-dialog-dropdown-showhide", function (e) {
showHideHandler($(this));
});
function showHideHandler(el) {
el.each(function (i, element) {
if($(element).is("coral-select")) {
// handle Coral3 base drop-down
Coral.commons.ready(element, function (component) {
showHide(component, element);
component.on("change", function () {
showHide(component, element);
});
});
} else {
// handle Coral2 based drop-down
var component = $(element).data("select");
if (component) {
showHide(component, element);
}
}
})
}
function showHide(component, element) {
// get the selector to find the target elements. its stored as data-.. attribute
console.log("Component: ", component)
console.log("Element: ", element)
var target = $(element).data("cqDialogDropdownShowhideTarget");
var $target = $(target);
if (target) {
console.log("Target found", target)
var value;
if (typeof component.value !== "undefined") {
value = component.value;
} else if (typeof component.getValue === "function") {
value = component.getValue();
}
// Find visible-fields of value
var selectedItem = $(element).find("coral-select-item[value='" + value + "']");
console.log("selectedItem", selectedItem)
var visibleFields = selectedItem.data("visibleFields");
if (visibleFields) {
console.log("visibleFields", visibleFields)
// make sure all unselected target elements are hidden.
$target.not(".hide").addClass("hide");
// Split visible-fields by ',' and iterate
visibleFields.split(',').forEach(function(element) {
visibleField = element.trim()
if (visibleField != null || visibleField == "") {
console.log(visibleField)
$target.filter("[data-showhidetargetvalue='" + visibleField + "']").removeClass("hide");
}
})
}
}
}
})(document, Granite.$);
