Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Granite:id to granite:class

Shaheena_Sheikh
Level 4
Level 4

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
Anudeep_Garnepudi
Correct answer by
Community Advisor
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
Anudeep_Garnepudi
Correct answer by
Community Advisor
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

Shaheena_Sheikh
Level 4
Level 4
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.
Anudeep_Garnepudi
Community Advisor
Community Advisor
add [0] as let fontField = $(this).find(".fontField")[0]; should work.
asutosh_jena
Community Advisor
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! 

asutosh_jena
Community Advisor
Community Advisor
It looks like you updated the code now and the earlier code snippet was different 🙂
Shaheena_Sheikh
Level 4
Level 4

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

asutosh_jena
Community Advisor
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?