Why does repeater removeItem run multiple times?

Ask the community
,
1

Hello,

I’ve created a wishlist collection and a wishlist repeater that works, but removeItem function is running rather slowly.

So, I decided to monitor it’s activity with console.log. I see that my removeItem code is running:

  • First time user clicks removeItem, code runs 1 time
  • Second time user clicks removeItem, code runs 2 times (second fails)
  • Third time user clicks removeItem, code runs 4 times (2-4 fail)
  • Fourth time user clicks removeItem, code runs 8 times (2-8 fail)

This behavior resets itself if I reload the page.

I believe the problem is in loadWishList() getting called from removeItem(), but I don’t see it. Can anyone spot what’s causing this behavior?

Log file and code included.

Thank you, Jason

CONSOLE LOG 

Loading the code for the My Wishlist page. To debug this code, open t1v1p.js in Developer Tools.
***** 4  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** removeItem ID  eeab6321-7c5e-4e3b-a22b-1fc2acce6ce6        <-- RUNS ONCE
***** Removed Item: eeab6321-7c5e-4e3b-a22b-1fc2acce6ce6 ***
***** 3  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** removeItem ID  99cda135-ff36-401b-8022-03309fe63a88        <-- RUNS TWICE
***** removeItem ID  99cda135-ff36-401b-8022-03309fe63a88
***** Removed Item: 99cda135-ff36-401b-8022-03309fe63a88 ***
***** Remove result is null! ***        
***** 2  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 2  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** removeItem ID  2ddd43d7-771b-4d27-bb9e-d917dd11fc45        <-- RUNS FOUR TIMES
***** removeItem ID  2ddd43d7-771b-4d27-bb9e-d917dd11fc45
***** removeItem ID  2ddd43d7-771b-4d27-bb9e-d917dd11fc45
***** removeItem ID  2ddd43d7-771b-4d27-bb9e-d917dd11fc45
***** Removed Item: 2ddd43d7-771b-4d27-bb9e-d917dd11fc45 ***
***** Remove result is null! ***
***** Remove result is null! ***
***** Remove result is null! ***
***** 1  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 1  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 1  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 1  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** removeItem ID  8d80a9a5-6bfc-48e6-bfdd-bfdb1d552820        <-- RUNS EIGHT TIMES
***** removeItem ID  8d80a9a5-6bfc-48e6-bfdd-bfdb1d552820
***** removeItem ID  8d80a9a5-6bfc-48e6-bfdd-bfdb1d552820
***** removeItem ID  8d80a9a5-6bfc-48e6-bfdd-bfdb1d552820
***** removeItem ID  8d80a9a5-6bfc-48e6-bfdd-bfdb1d552820
***** removeItem ID  8d80a9a5-6bfc-48e6-bfdd-bfdb1d552820
***** removeItem ID  8d80a9a5-6bfc-48e6-bfdd-bfdb1d552820
***** removeItem ID  8d80a9a5-6bfc-48e6-bfdd-bfdb1d552820
***** Removed Item: 8d80a9a5-6bfc-48e6-bfdd-bfdb1d552820 ***
***** Remove result is null! ***
***** Remove result is null! ***
***** Remove result is null! ***
***** Remove result is null! ***
***** Remove result is null! ***
***** Remove result is null! ***
***** Remove result is null! ***
***** 0  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 0  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 0  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 0  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 0  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 0  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 0  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}
***** 0  items in Wishlist for user  5c90d496-5568-4d6f-85aa-b586f2829f56  with data  
{...}

CODE

import wixData from 'wix-data';
import wixUsers from 'wix-users';

//-------------------------------------------------------------------------------
// OnReady Call LoadWishlist Function
//-------------------------------------------------------------------------------
$w.onReady(function () {
	loadWishlist();
});

//-------------------------------------------------------------------------------
// Load WishList Function
//-------------------------------------------------------------------------------
async function loadWishlist(){

    // Retrieve Current User's Wishlist Items
    let user = wixUsers.currentUser;
    let wishlistResult = await wixData.query("Wishlist")
        .eq("userId", user.id)
        .include('menuItem')
        .find()     
    
    // Determine if there are Any Items in their Wishlist
    console.log("*****", wishlistResult.length," items in Wishlist for user ", user.id, " with data ", wishlistResult) 
    if (wishlistResult.length > 0) {
        $w("#wishlist").expand();
        $w("#emptyWishlist").collapse();
        $w("#wishlist").data = wishlistResult.items;
        $w('#wishlist').onItemReady(myItemReady);
    }
    else {
        $w("#wishlist").collapse();
        $w("#emptyWishlist").expand();
    }   
}

//-------------------------------------------------------------------------------
// Repeater Item is Ready, so Add Content to it
//-------------------------------------------------------------------------------
function myItemReady($w, wishlistItem){
    let menuItem = wishlistItem.menuItem;
    $w('#image').src = menuItem.photo;
    $w('#title').text = menuItem.title;
    $w('#month').text = menuItem.month;
    $w('#removeItem').onClick(removeItem(wishlistItem._id));
}

//--------------------------------------------------------------------------------
// Create removeItem function for Each Wislist Item
//--------------------------------------------------------------------------------
function removeItem(id) {
    return async function() {
        console.log("*****", "removeItem ID ", id)
        
        await wixData.remove('Wishlist', id)
            .then((result) => {     
            if (result) {
                console.log("*****", "Removed Item:", id, "***");
            } else {
                console.log("*****", "Remove result is null! ***");
                }
            })

        loadWishlist();
    }
}
2 
import wixData from 'wix-data';
import wixUsers from 'wix-users';

var REPEATER1 = "wishlist"

$w.onReady(function () {
    loadWishlist();
    $w("#"+REPEATER1).onItemReady(($item, itemData, index)=>{
        let menuItem = itemData.menuItem;
        $item('#image').src = menuItem.photo;
        $item('#title').text = menuItem.title;
        $item('#month').text = menuItem.month;
        $item('#removeItem').onClick(removeItem(wishlistItem._id));
    });
});

// Load WishList Function-----------------------------------------------------------------
async function loadWishlist(){
    // Retrieve Current User's Wishlist Items
    let user = wixUsers.currentUser;
    let wishlistResult = await wixData.query("Wishlist")
        .eq("userId", user.id)
        .include('menuItem')
        .find()     
    
// Determine if there are Any Items in their Wishlist------------------------------------
    console.log("*****", wishlistResult.length," items in Wishlist for user ", user.id, " with data ", wishlistResult) 
    if (wishlistResult.length > 0) {
        $w("#"+REPEATER1).expand(), $w("#emptyWishlist").collapse();
        $w("#"+REPEATER1).data = wishlistResult.items;
        //$w('#wishlist').onItemReady(myItemReady);
    }
    else {
        $w("#"+REPEATER1).collapse(), $w("#emptyWishlist").expand();
    }   
}

// Create removeItem function for Each Wislist Item------------------------------------
function removeItem(id) {
    return async function() {console.log("*****", "removeItem ID ", id)
        await wixData.remove('Wishlist', id)
            .then((result) => {     
                if (result) {console.log("*****", "Removed Item:", id, "***");}
                else {console.log("*****", "Remove result is null! ***");}
            });
        loadWishlist();
    }
}

If it still does show you DOUBLED and TRIPPLED RESULTS…

Then go this way…

$w.onReady( function () {
  $w("#repeatedContainer").onClick( (event) => {
    const data = $w("#myRepeater").data;
    let clickedItemData = data.find(item => item._id === event.context.itemId);
  } );
} );
3

THANK YOU!!!

There was one small error on line 13 in the code you provided. The error was Wix code SDK error: The “onItemReady” function of “wishlist” threw the following error: wishListItem is not defined.

To fix it, I made this change:

LINE 13 was:

$item('#removeItem').onClick(removeItem(wishlistItem._id));

LINE 13 fixed is:

$item('#removeItem').onClick(removeItem(itemData._id));

I really can’t thank you enough for helping me with this! I’ll continue to expand my WIX work.

4

You are welcome. Good luck with your project.