I have two repeaters, Each of them with different products (One of them shows the favorite top 5 of the user (repeater1), and the other one the rest of products she likes but are not in top 5(repeater2)). In repeater2 I have a button in each of the containers to move the product to the top 5. So after clicking, the product is eliminated from one dataset, added to another and then the repeaters are reloaded to show the change.
After one reload of the repeater, when I click again in another button to transfer a new product to the top 5, it makes the operation twice, as if clicked twice on the button very fast, then 3, 4 etc... This results in the duplication of code execution and adding the same product several times on the top 5.
I am using the repeaters forEachItem() to set the onclik event since I need to pass to the function some info about the element in which it is being clicked (in this case the favoriteNumber). - You can see some code below-
Is this a bug?? If not, why is this done this way? Is there a workaround to prevent this?
$w("#repeater2").forEachItem( ($item, itemData, index) => {
$item('#image2').src = itemData.favorito1.mainMedia;
$item('#text42').text = itemData.favorito1.name;
$item('#image2').link = itemData.favorito1.productPageUrl;
$item('#image2').target = "_blank";
$item('#moverAFavoritos').onClick(transferToTopFive(itemData.favoriteNumber, 5));
});
Hi, Philip!
Thank you too for this reply. This solution definitely is much better! I'll try this soon.
Regards.
Hi Gladen - thanks very much for your answer.
I had hoped that as the button click event is in a "forEachItem" it would only run on that item. In a way it does... My code is extracting an item from an array and adding in a new one, so that the user can cycle through three options for that item. The multiple "phantom" button clicks that follow the first one execute this code multiple times, but they only add the same item again (and again, and again...) they don't add the options that are set up for each of the other items.
I can't see when it would be a good idea for a button inside an item to behave that way...
Another oddity is that if I only press the button on one item, after the repeater loads, there is no duplication, no matter how many times I press that particular button and no matter how many items are in the repeater. Only when I press a button in a different item does the duplication start. But then the more items I press the button in, the duplication seems to become exponential and it crashes the page.
My work-around fix has been to add a button.disable() in the first line of the code after the click. Although I get a couple of "button.disable is not a function" warnings - (maybe because it is already disabled by the time the second and third attempts occur) - it seems to work and stops the code running multiple times. Then the new array is used to set the repeater items and the phantom button presses end.
My worry about just letting the code run and then extracting the new item from the array is that it seemed to be taking a very long time to cycle - because of the exponential effect.
However, if I run into any more problems I will definitely try your idea - so thanks again.
I am pretty new to this forum, so I don't know if a Wix person will dive in to offer a better solution or to tell me why mine doesn't work - but I hope it helps with a work-around.
I had a similar issue, but it isn't too difficult to resolve.
The reason that you get multiple click instances is because in a repeater, it cycles through all the items in the repeater.
If you have 8 items in the repeater and click on the first one, it will log 8 instances of the event. If you click on the second-to-last item, it will log 2 instances; etc.
I was sending the data into an array so I used the Set() javascript function. If you need a single result, then you should pass the click-values into an array and then create a new set for your code to use.
Edited to add: if your click event triggers an immediate action, then you don't need to worry about how many times it reloads the exact same data
let chars = ['A', 'B', 'A', 'C', 'B']; let uniqueChars = [...new Set(chars)]; console.log(uniqueChars); //returns [ 'A', 'B', 'C' ]
Hi Enrique - did you manage to solve this? I have exactly the same problem.
You don't indicate what's in the function. How are you transferring an item from one dataset to another? Do both datasets connect to the same collection?
Please provide more information regarding what you are doing.