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