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?
Solved! Go to Solution.
Views
Replies
Total Likes
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.
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.
Views
Replies
Total Likes
Views
Replies
Total Likes
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!
Views
Replies
Total Likes
Views
Replies
Total Likes
i pasted the complete function for better understanding. And the first code is not having any multifield
Views
Replies
Total Likes
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?
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies