Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Granite:id to granite:class

Avatar

Level 6

If I replace:

 

const setOptions = function () {

let fontField = $(".cq-dialog").find("#fontField ")[0];
let optionItems = fontField.items;
optionItems.clear();
for (var i = 0; i < 1; i++) {
let obj = new Object();
let cnt = new Object();
obj["value"] = "#ffffff";
cnt["textContent"] = "white";
obj["content"] = cnt;
optionItems.add(obj);
}

};

with:

const setOptions = function () {
$(".coral3-Multifield-item").each(function( index ) {
let fontField = $(this).find(".fontField ");
var arah=["#ffffff","#000000",""];
var aran=["White","Black","No Color"];
fontField.prop('readOnly', false);
let optionItems=fontField.items;
optionItems.clear();
for (var i = 0; i < arah.length; i++) {
let obj = new Object();
let cnt = new Object();
obj["value"] = arah[i];
cnt["textContent"] = aran[i];
obj["content"] = cnt;
optionItems.add(obj);
}
})
};

In first case: I am using fontField as granite:id and in the second case I'm using granite:class. In first case, the color option items get added to the swatch and I am able to see the colors. But, in the second case the same code (using granite:class) stops working. I don't see any color in the swatch and optionItems shows as undefined.

In the first code i don't have a multifield, while in second code, my colorfield is within a multifield. The swatch is showing empty for the 2nd code because items are not getting added.

Screenshot (191).png

Console error: Cannot read property 'clear' of undefined for the line where optionItems are getting cleared.

Why does changing granite:id to class affect it?

 

@Anudeep_Garnepudi 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Shaheena_Sheikh 

Any console errors? It should work. I think .each close parenthesis is missing.

[Update]: Checked updated code, [0] is missing at let fontField = $(this).find(".fontField")[0];

Adding that should work.

View solution in original post

9 Replies

Avatar

Correct answer by
Community Advisor

@Shaheena_Sheikh 

Any console errors? It should work. I think .each close parenthesis is missing.

[Update]: Checked updated code, [0] is missing at let fontField = $(this).find(".fontField")[0];

Adding that should work.

Parathesis are all in place in my actual code, pasted it wrong here. Console error: Cannot read property 'clear' of undefined for the line where optionItems are getting cleared.

Avatar

Community Advisor
add [0] as let fontField = $(this).find(".fontField")[0]; should work.

Avatar

Community Advisor

Hi @Shaheena_Sheikh 

 

Please try with below:

let fontField = $(".cq-dialog").find(".font-field")[0];

$(this) refers to the parent element which is multifieldItem in this case.

 

Thanks! 

Avatar

Community Advisor
It looks like you updated the code now and the earlier code snippet was different

Avatar

Level 6

i pasted the complete function for better understanding. And the first code is not having any multifield

Avatar

Community Advisor

Hi @Shaheena_Sheikh 

No worries.

 

Can you post the DOM screenshot from the console? Also can you confirm if you have fontField as the class available for the element like how you have an id as fontField?