Granite:id to granite:class
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?