Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED
Call Multifield dropdown Value in Jquery
Hi All,
I have written one custom jQuery for my Customized Content Fragment. Inside this custom Jquery I want to call the dropdown value and on change dropdown value it will show the text field.
For example, in My dropdown 3 values are there called Article, Casestudy and External Link.
So when somebody will select Article then it will show Choose destination item content Reference only , but not the External Link Only as shown below.
But I am not sure how can I do this validation inside my multifield Jquery ?
I have written below Jquery and I am getting all multifield value under mfValArr[i] and I have put the below console log console.log(" mfValArr[i] inside rightrail===== " + mfValArr[i]);
You can see this console log in my below code.
var isRelationUpdated = false,
isRelationUpdateError = false,
itemsLoaded = {};
(function($) {
$(function() {
// Static Right Rail
var CFM = window.Dam.CFM,
MASTER = "master",
CFM_EDITOR_SEL = ".content-fragment-editor",
CORAL_MF_ITEM = "coral-multifield-item",
EAEM_COMPOSITE_ITEM_VALUE = "data-eaem-composite-item-value",
MF_NAME_ATTR = "data-granite-coral-multifield-name",
COMPOSITE_MF_SEL = "[data-granite-coral-multifield-composite]";
var ClientStaticLandingURLRE = new RegExp("\\/editor.html\\/content\\/dam\\/content-admin\\/micro-site\\/[\\w-]+\\/staticrightrail\\/[\\w-%$&!@\\(\\)]+");
var srcPathRegex = /\/content\/dam\/content-admin\/[\w]+/;
var ARTICLE_OPTION = 'Article', CS_OPTION = 'Case Study', EXTERNAL_LINK = 'External Link', ARTICLE = 'articles', CS = 'case-studies', LEADERSHIP = 'leadership', YOUTUBE_LINK = 'Youtube Link';
var host = document.location.origin;
if (ClientStaticLandingURLRE.test(location.pathname)) {
setTimeout(loadContent, 5000);
}
function loadContent(){
var url = CFM.EditSession.fragment.urlBase + "/jcr:content/data.2.json";
console.log("url inside rightrail===== "+ url );
$.ajax(url).done(loadContentIntoMultiFields);
}
function loadContentIntoMultiFields(data){
var $composites = $(COMPOSITE_MF_SEL), mfValArr, mfAddEle,
vData = data[getVariation()], $lastItem;
console.log("vData inside rightrail ===== "+ vData );
if(_.isEmpty(vData)){
return;
}
var wait = false;
console.log("ClientStaticLandingURLRE.test(location.pathname) inside rightrail ===== "+ ClientStaticLandingURLRE.test(location.pathname) );
if (ClientStaticLandingURLRE.test(location.pathname)) {
wait = true;
_.each($composites, function(mField) {
setAccordionView(mField);
});
}
if (wait) {
setTimeout(function(vData) {
innerLoadContentIntoMultifields(vData);
}, 50, vData);
} else {
innerLoadContentIntoMultifields(vData);
}
}
function setAccordionView(multifield) {
if (multifield !== null && multifield.getAttribute('accordion-view') === null) {
var template = document.createElement('template');
template.innerHTML = '<coral-accordion-item><coral-accordion-item-label></coral-accordion-item-label><coral-accordion-item-content>' + multifield.template.innerHTML + '</coral-accordion-item-content></coral-accordion-item>';
template.setAttribute('coral-multifield-template', '');
multifield.template = template;
multifield.outerHTML = '<coral-accordion>' + multifield.outerHTML + '</coral-accordion>';
multifield.setAttribute('accordion-view', '');
}
}
function innerLoadContentIntoMultifields(vData) {
var $composites = $(COMPOSITE_MF_SEL);
_.each($composites, function(mField){
var mfName = getNameDotSlashRemoved(($(mField)).attr(MF_NAME_ATTR));
console.log("mfName ===== inside rightrail123 " + mfName);
var mfValArr = vData[mfName];
if (mfValArr !== undefined) {
itemsLoaded[mfName] = {
total: mfValArr.length,
loaded: 0
};
} else {
console.log("mfName ===== inside rightrail " + mfName);
$(document).trigger('test-document-ready', [mfName]);
}
if ($(mField).attr('typeahead')) {
$(document).trigger('test-multifield-set-typeahead', [$(mField)]);
}
var mfAddEle = mField.querySelector("[coral-multifield-add]");
console.log("mfAddEle ===== inside rightrail " + mfAddEle);
if(_.isEmpty(mfValArr)) {
addClickEvent(mfAddEle, mField);
$(document).trigger('test-set-accordion-view', [$(mField)]);
$(document).trigger('test-document-ready', [mfName]);
return;
}
_.each(mfValArr, function(mfMap){
mfAddEle.click();
});
setTimeout(function(mField, mfValArr, mfName) {
$(document).trigger('test-set-accordion-view', [$(mField)]);
var $multifieldItems = $(mField).find(CORAL_MF_ITEM);
console.log("$multifieldItems inside rightrail===== " + $multifieldItems);
console.log("mfValArr length inside rightrail===== " + mfValArr.length);
for (var i = 0, lastItem ; i < mfValArr.length ; i++) {
lastItem = $multifieldItems[i];
console.log(" mfValArr[i] inside rightrail===== " + mfValArr[i]);
var mfMap = mfValArr[i];
lastItem.setAttribute(EAEM_COMPOSITE_ITEM_VALUE, mfMap);
lastItem.setAttribute('mf-name', mfName);
lastItem.setAttribute('rte-ready', true);
fillMultifieldItems(lastItem);
triggerRTE(lastItem);
$(document).trigger('test-set-constraints', [lastItem, mField]);
}
$(document).trigger('test-validate-form');
}, 1, mField, mfValArr, mfName);
addClickEvent(mfAddEle, mField);
});
}
function getVariation(){
var variation = $(CFM_EDITOR_SEL).data('variation');
//console.log("variation ===== " + variation);
variation = variation || "master";
return variation;
}
function getNameDotSlashRemoved(name){
if(_.isEmpty(name)){
return name;
}
let indexOfLastSlash = name.lastIndexOf("/");
var sname = (indexOfLastSlash === -1) ? name : name.substr(indexOfLastSlash + 1);
return sname.replace('-auto', '');
}
function addClickEvent(button, mField) {
$(document).trigger('test-form-click', [mField, button]);
button.addEventListener('click', function(event) {
setTimeout(function() {
var $lastItems = $(mField).find(CORAL_MF_ITEM).not('[rte-ready]');
for (var i = 0, lastItem ; i < $lastItems.length ; i++ ) {
lastItem = $lastItems[i];
lastItem.setAttribute('rte-ready', true);
var $composites = $(lastItem).find(COMPOSITE_MF_SEL);
if (ClientStaticLandingURLRE.test(location.pathname)) {
_.each($composites, function(mField) {
setAccordionView(mField);
setTimeout(function(mField) {
var $mField = $('[data-granite-coral-multifield-name="' + mField.getAttribute('data-granite-coral-multifield-name') + '"]');
mField = $mField.length > 0 ? $mField.first()[0] : null;
if (mField !== null) {
let mfAddEle = mField.querySelector("[coral-multifield-add]");
addClickEvent(mfAddEle, mField);
}
}, 50, mField);
});
} else {
$composites = $(lastItem).find(COMPOSITE_MF_SEL);
_.each($composites, function(mField) {
let $mField = $('[data-granite-coral-multifield-name="' + mField.getAttribute('data-granite-coral-multifield-name') + '"]');
mField = $mField.length > 0 ? $mField.first()[0] : null;
if (mField !== null) {
let mfAddEle = mField.querySelector("[coral-multifield-add]");
addClickEvent(mfAddEle, mField);
}
});
}
triggerRTE(lastItem);
}
}, 50);
});
}
function fillMultifieldItems(mfItem){
if(mfItem == null){
return;
}
// Set inner accordions
let $composites = $(mfItem).find(COMPOSITE_MF_SEL);
var wait = false;
if (ClientStaticLandingURLRE.test(location.pathname) && $composites.length > 0) {
wait = true;
_.each($composites, function(mField) {
setAccordionView(mField);
});
}
if (wait) {
setTimeout(function(mfItem) {
setAttributesMultifieldItems(mfItem);
}, 50, mfItem);
} else {
setAttributesMultifieldItems(mfItem);
}
}
function setAttributesMultifieldItems(mfItem) {
var mfMap = mfItem.getAttribute(EAEM_COMPOSITE_ITEM_VALUE);
if(_.isEmpty(mfMap)){
return;
}
mfMap = removeNonValidJsonCharacters(mfMap);
mfMap = JSON.parse(mfMap);
_.each(mfMap, function(fValue, fKey) {
var field, needsTimeout = false;
if (!Array.isArray(fValue)) {
field = mfItem.querySelector("[name$='" + fKey + "']");
console.log("field ===== inside rightrail " + field);
} else {
if(fKey == "leaderName") return;
field = mfItem.querySelector("[data-granite-coral-multifield-name$='" + fKey + "']");
field = field === null ? mfItem.querySelector("[name$='" + fKey + "']") : field;
}
if (field == null) {
return;
}
setFieldValue(field, fValue);
});
setItemLoad(mfItem);
$(document).trigger('test-validate-form');
}
function removeNonValidJsonCharacters(jsonString) {
if (jsonString !== undefined && jsonString !== null) {
jsonString = jsonString.replace(/[\r\n\t]/g, ""); // remove tabs and line breaks
}
return jsonString;
}
function setFieldValue(field, value){
if( field.tagName == "CORAL-CHECKBOX"){
if (field.getAttribute("value") === 'boolean') {
field.checked = value;
} else {
field.checked = (field.getAttribute("value") == value);
}
} else if (field.tagName == "CORAL-MULTIFIELD") {
let mfAddEle = field.querySelector("[coral-multifield-add]");
_.each(value, function(val) {
mfAddEle.click();
var $lastItem = $(field).find(CORAL_MF_ITEM).last();
$lastItem.attr(EAEM_COMPOSITE_ITEM_VALUE, JSON.stringify(val));
Coral.commons.ready($lastItem[0], function (lastItem) {
fillMultifieldItems(lastItem);
triggerRTE(lastItem);
lastItem.setAttribute('rte-ready', true);
$(document).trigger('test-set-constraints', [lastItem]);
});
});
mfAddEle.addEventListener('click', function(event) {
setTimeout(function(field) {
let $lastItems = $(field).find(CORAL_MF_ITEM).not('[rte-ready]');
for (var i = 0, lastItem ; i < $lastItems.length ; i++ ) {
lastItem = $lastItems[i];
lastItem.setAttribute('rte-ready', true);
var $composites = $(lastItem).find(COMPOSITE_MF_SEL);
if (staticURLRE.test(location.pathname) || communityURLRE.test(location.pathname) || clientStaticRightRail.test(location.pathname)) {
_.each($composites, function(mField) {
setAccordionView(mField);
});
}
triggerRTE(lastItem);
$(document).trigger('test-validate-form');
}
}, 50, field);
});
} else if (field.tagName === "CORAL-AUTOCOMPLETE") {
console.log(value);
} else if (field.tagName === "CORAL-SELECT"){
if (field.multiple){
field.values = value;
} else {
field.value = value;
}
} else if (field.tagName === "CORAL-DATEPICKER"){
if (value !== undefined && value !== null) {
field.value = value[value.length -1] === 'Z' ? value.slice(0, -1) : value;
} else {
field.value = value;
}
} else {
field.value = value;
}
}
function setItemLoad(mfItem) {
var mfName = mfItem.getAttribute('mf-name');
console.log("mfName ===== inside rightrail " + mfName);
if (mfName === null || mfName === undefined) return;
itemsLoaded[mfName].loaded = itemsLoaded[mfName].loaded + 1;
if (itemsLoaded[mfName].loaded >= itemsLoaded[mfName].total) {
$(document).trigger('test-document-ready', [mfName]);
}
}
function triggerRTE(lastItem) {
if (ClientStaticLandingURLRE.test(location.pathname)) {
$(lastItem).find('coral-accordion-item').first().on('click', {item: lastItem}, function(event) {
if ($(event.target).parents('.coral3-Accordion-header').length > 0) {
prepareRTE(lastItem);
$(document).trigger('test-validate-form');
}
});
} else {
prepareRTE(lastItem);
}
}
function prepareRTE(item) {
var $container = $(item).hasClass('cfm-multieditor') ? $(item) : $(item).find(".cfm-multieditor").not('[ready]');
$container.each(function() {
var $this = $(this);
var editorManager = $this.closest(".content-fragment-editor").data("multiEditorManager");
if (editorManager) {
editorManager.handleContainer($this);
$this.attr('ready', true);
}
setTimeout(function(rte) {
$(document).trigger('test-rte-options', [rte]);
}, 50, this);
});
}
});
})(jQuery);
Below is my Dialog
Can anybody please help me how can I achieve this on change Article , it will show Choose destination item content Reference only , and hide the External Link.
Thanks
Subb
1 Accepted Solution
Correct answer by
Hi,
Please review the resources provided in this thread link, as they will clearly demonstrate how to handle such situations.
The key consideration is to ensure that you target the correct element using jQuery. Since the elements within a multifield may share the same "name" and "classes," it's essential to accurately identify the fields associated with the targeted dropdown.
Hope this helps.
Esteban Bustamante
Correct answer by
Hi,
Please review the resources provided in this thread link, as they will clearly demonstrate how to handle such situations.
The key consideration is to ensure that you target the correct element using jQuery. Since the elements within a multifield may share the same "name" and "classes," it's essential to accurately identify the fields associated with the targeted dropdown.
Hope this helps.
Esteban Bustamante
Related Conversations
