hello, I have repeater connected to a dataset, lets each row on the dataset is a member’s card. so it looks like this:
function test (){
$w("#list").onItemReady( ($item, itemData, index) => {
$item('#name').text = "" + itemData.name;
$item('#age').text = "" + itemData.age;
$item('#gender').text = "" + itemData.gender;
})
}
now I want to add a button to update the database, and then recreate the repeater.
so I have a button to update the item in database and then recall the function, I leave the update code for now because its not the issue, instead there’s console to see the update:
function test (){
$w("#list").onItemReady( ($item, itemData, index) => {
$item('#name').text = "" + itemData.name;
$item('#age').text = "" + itemData.age;
$item('#gender').text = "" + itemData.gender;
$item('#button1').onClick((event, $w) =>{
console.log ("update database")
return test();
})
}
now for the first click everything is fine, console shows “update database”.
next time I click its doubled, console shows:
“update database
update database”
third time:
“update database
update database
update database
update database”
and so on…
how can I recall the function without having trouble with the onClick?
Thank you very much,
Yaron.
In the snippet you are missing the closing Brackets of the onItemReady function. Is that a mistake while copy pasting?
function test (){
$w("#list").onItemReady( ($item, itemData, index) => {
$item('#name').text = "" + itemData.name;
$item('#age').text = "" + itemData.age;
$item('#gender').text = "" + itemData.gender;
$item('#button1').onClick((event, $w) =>{
console.log ("update database")
return test();
})
}) <-- closing brackets
}
Well that’s just a sample code, not the actual code, so forget the typos.
The code works, I get no error in the console, just what I’ve said about multiplying the actions while returning to function
Really not sure what you’re trying to do, but in your onClick() event handler, you are recursively calling the containing function:
return test();
What you want is to put the onItemReady() event handler in the page’s onReady() function. Then, whenever you change the data of the Repeater, the onItemReady() function will be triggered and re-render the Repeater.
See the Repeater Introduction in the API docs for a full explanation - including code snippets and typical scenarios.
i’ll try to be more clear, this is my code:
$w('#calendardb').onReady( () => {
$w("#calendar").onItemReady( ($item, itemData, index) => {
var event = new Date(itemData.fullDate).getTime()
if (event < today){
$item('#CalMon').html = "<span style='font-size: 20px; color: #AFAFAF;'><center>" + ("" + itemData.month) + "</center></span>"
$item('#CalDay').html = "<span style='font-size: 46px; color: #AFAFAF;'><center>" + ("" + itemData.day) + "</center></span>"
}
if (event > today)
{
$item('#CalMon').text = ("" + itemData.month)
$item('#CalDay').text = ("" + itemData.day)
}
if (itemData._id === selected) // "selected" is the event picked (next event by defeault)
{
$item('#box1').hide()
$item('#box2').show()
$item('#SelMon').text = ("" + itemData.month);
$item('#SelDay').text = ("" + itemData.day);
$item('#box1').onClick((event, $w) =>{
????
})
})
})
its a list of events’ dates, when each date picked shows the event details and should be marked (i have 2 boxes, one is hoverbox for unmarked, one is box for marked)
now what i do onClick?
if i just write the “selected” options, it would mark the date selected, but wont unmark the previous selections…
thats why i watned to return the function and re create the repeater
Hey, I’m still having it hard to figure out how to work with the repeater if i want it to be interactive…
I was trying to change the function a little bit so i wont work with datasets inside it, and the funtion gets the array of data.
This is a function that gets an array of event’s and the selected event (next event by default)
and i have the onClick to select another date, but i dont get how to recreate the repeater after a different date is selcted
function calendarrepeater(dates,selected)
{
console.log ("NOW")
let today = new Date().getTime();
$w('#calendar').data = dates
$w('#calendar').forEachItem( ($item, itemData, index) => {
var round = new Date(itemData.fullDate).getTime()
if (round < today){ //event already passed will be grey
$item('#CalMon').html = "<span style='font-size: 20px; color: #AFAFAF;'><center>" + ("" + itemData.month) + "</center></span>"
$item('#CalDay').html = "<span style='font-size: 46px; color: #AFAFAF;'><center>" + ("" + itemData.day) + "</center></span>"
}
if (round === selected.fullDate.getTime()) //selected event is marked
{
$item('#box1').hide()
$item('#box2').show()
$item('#text266').text = ("" + selected.month);
$item('#text265').text = ("" + selected.day);
$w('#text270').text = selected.title;
if (round > today)
{
$item('#CalMon').text = ("" + itemData.month)
$item('#CalDay').text = ("" + itemData.day)
}
$item('#box1').onClick((event, $w) =>{ //get the selected event
selected = dates[index]
console.log (selected)
return (dates,selected)
})
})
}
how do i tell the function that there is a new selected event?