Expand my Community achievements bar.

SOLVED

Call Multifield dropdown Value in Jquery

Avatar

Level 3

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.

 

subnaik_0-1692967935179.png

 

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.

 

 

subnaik_1-1692968160823.png

 

 

 

 

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

 

subnaik_2-1692968436074.png

 

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

Avatar

Correct answer by
Community Advisor

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

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

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