Question:
I am manually setting the HTML property of a textbox inside a repeater with VELO code.
I can console log the .html and .text properties of the itemData inside the repeater and see that the value is being populated. But the container, is still showing the default data of the textbox when building it inside the editor. This is in preview mode.
Product:
Wix Website Editor - Dev Mode - Velo
What are you trying to achieve:
I want the textbox, inside the repeater to show the html/text that is set, rather than the default dummy data from the editor mode.
What have you already tried:
I have tried setting the itemData.html only, itemData.text only, I can see in the console log that the values are setting correctly on either, it just doesn’t display like that on the editor.
Additional information:
Console log of the itemData:
item html
TBC
item text TBC
Code for repeater:
$w('#repeater2').onItemReady(($item, itemData, index) => {
const originalDate = itemData.start_from;
const salary = itemData.salary * salaryIntervals[itemData.salary_interval]
const date = new Date(originalDate);
const day = date.getDate();
const month = date.toLocaleString('default', { month: 'long' });
const year = date.getFullYear();
// Create the formatted date string wrapped in HTML tags
const formattedDate = `<p style="text-align: right; font-family: 'Open Sans', sans-serif;">
<b>${day} ${month}</b> <span>${year}</span>
</p>`;
const newString = ''.padEnd(50, " ");
$item('#companyName').text = itemData.employer_name;
$item('#jobTitle').text = itemData.heading + newString + newString;
$item('#apprenticeshipCourse').text = itemData.nas_standard.name;
console.log('itemData salary ', itemData.salary)
console.log("final salary ", salary)
console.log("final salary ", salary.toLocaleString())
if(itemData.salary === undefined || itemData.salary < 1) {
console.log('setting to tbc')
$item('#annualSalary').html = `<p style='color: black; font-family: Open Sans; text-align: right;'>TBC</p>`;
}
else {
console.log('setting to html')
$item('#annualSalary').html = `<p style='color: black; font-family: Open Sans; text-align: right;'><b>£${salary.toLocaleString()}</b> <span style='font-size: 12px'>Per Year</span></p>`;
}
console.log('item text ', $item('#annualSalary').text);
console.log('item html ', $item('#annualSalary').html);
$item('#cityAndTown').text = itemData.city + ' ' + itemData.employer.county;
$item('#date').html = formattedDate
$item('#button1').link = `https://dummydata.com/${itemData._id}`;
// $item('#text16').text = itemData.employer_name;
// $item('#price').text = itemData.price;
});
