Granite:id to granite:class

[Shaheena_Sheikh]

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.

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 

[Anudeep_Garnepudi · Accepted solution]

@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.

[Shaheena_Sheikh]

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]

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

[Asutosh_Jena_]

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! 

[Shaheena_Sheikh]

my font-field is within multifield

[Asutosh_Jena_]

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

[Shaheena_Sheikh]

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

[Asutosh_Jena_]

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?

[Shaheena_Sheikh]

i was referring to https://adapttoaem.blogspot.com/2021/02/setting-dynamic-dropdownselect-value-in.html in here, the only difference is that in my case the colorfield is inside a multifield