Repeater on button click: populate value for the repeater item record (variable)

Hello all,

I have another challenge in my current project.

Expected behavior
When a logged in User (Member) clicks a button button in a repeater (connected to a dataset already),
Then it should update the record of the displayed item in the repeater with some values

Current behavior with below code
When a logged in User (Member) clicks a button button in a repeater,
Then it updates the “status” and “partner” for the defined record id (“123”)

import wixData from 'wix-data';

import wixUsers from 'wix-users';

let user = wixUsers.currentUser;

let userId = user.id;           
let isLoggedIn = user.loggedIn; 

let toSave = {
  "status": "Accepted",
  "partner": user.id,
  "_id": "123",
};

export function acceptbutton_click(event) {
wixData.save("Jobs", toSave)
  .then((results) => {
    console.log(results); 
 })
  .catch((err) => {
    console.log(err);
 });
 }

Challenge N°1
Instead of hardcoding the ID of the record I want to update, I would like to have a dynamic value according to which item button of the repeater is clicked.
I am struggling to get this variable defined so I can re-use it the same way as I did for the user.id

Challenge N°2
I have tried with both “SAVE” and “UPDATE” function and everytime, it deletes the data in all fields for which I did not provide a value.
For example:
Database contains 4 columns: ID, Partner, Status and Title
By doing this:

let toSave = {
  "status": "Accepted",
  "partner": user.id,
  "_id": "123",
};

The current behavior is to modify the record with ID “123”
with “status”: “Accepted”, “partner”: user.id as defined but it also deletes the value contained in the Title column.

Please mention which challenge you’re helping with so it is clear for all users needing this in the future :wink:

Many thanks!

How to work with → update()

  1. first you get your data (in this case an ARRAY full of including OBJECTS) and save it into a variable.
  2. reach out to the variable and change the data inside of it.
  3. putting back modified data into DATABASE.

Therefore you have min. 2 different ways of how to achieve this.

  1. using wix-data (your chosen way) → coding-way
  2. using datasets+property-panel and predefined options (or datasets+code)

Instead of hardcoding the ID of the record I want to update, I would like to have a dynamic value according to which item button of the repeater is clicked.

I am struggling to get this variable defined so I can re-use it the same way as I did for the user.id

Is this button inside of your repeater ?

export function acceptbutton_click(event) {
    wixData.save("Jobs", toSave)
    .then((results) => {console.log(results);})
    .catch((err) => {console.log(err);});
}

I can’t recognize any code for your mentioned REPEATER.
Where is your REPEATER-CODE ?

An aproximative example, of how it could (should) look like…

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

let user = wixUsers.currentUser;
let userId = user.id;           
let isLoggedIn = user.loggedIn; 

$w.onReady(function(){
    console.log("User: ", user);
    console.log("User-ID: ", userId);
    console.log("You are logged-in = ", isLoggedIn);

    $w('#repeater1').onItemReady(($item, itemData, index)=>{
        //Event starts - - > when REPEATERs ITEMS are ---> READY...
        $item('#text1').text = itemData.title;
        $item('#anotherTextelement').text = itemData.status; 
        
        //Event starts - - > onClick()...
        $item('#acceptbutton').onClick((event)=>{
            console.log(event.target.id);
            console.log("Title: ", $item.title);
            console.log("Status: ", $item.status);
            console.log("Partner: ", $item.partner);
            //...continue....
            //...continue....
            //...continue....

            //GETTING DATA.....
            wixData.query("Jobs").find()
            .then((results) => {console.log(results); 
                let items = results.items; console.log(items);
                let firstItem = items[0]; console.log(firstItem);

                //Modifiying DATA .....
                firstItem.title = "xxxxxx"
                firstItem.status = "zzzzzz"
                //...
                //..
                //.
             
                
                //Data modified ----> ....continue....

                //Saving process.....
                 wixData.save("Jobs", firstItem)
                .then((results) => {console.log(results);})
                .catch((err) => {console.log(err);});       

            })
            .catch((err) => {
                console.log(err);
            });
        });
    });
});


Try to modify and complete the task…

Hello Velo-Ninja,

thank you for your reply!

Your code works but it is still “hardcoded” in the way that I have to specify the index of each item in the repeater.

To reply to your questions:

  • Repeater Name = #listRepeater
  • acceptbutton is indeed a button I have in my repeater

The expected behavior is that when the user clicks the #acceptbutton in a given displayed item, then this very item is populated with
partner: userID
status: “Accepted”

I will have a long list so I can specify for each item the index.

Basically I would need to know how I can make this happen:
When #acceptbutton is clicked on a given repeater item,
then save the following for the database record of the given displayed item:
partner: userID
status: “Accepted”

Perhaps I need to define the variable for “DisplayedItemInRepeater” so I can get something like this:
_id: DisplayedItemInRepeaterID
partner: userID
status: “Accepted”

which I am not sure how to achieve but also not sure how I can link it to the button displayed for each Item in the repeater.

I hope my explanation is clear, many thanks for your help, this is the very last blocker for this project…

Thank you!

Sorry made some mistakes in my previous post…
It should be the - - > “itemData” ← - instead.

$item('#acceptbutton').onClick((event)=>{
	console.log("Item-Data: ", itemData)
	//-------------------------------------
	console.log(event.target.id); 
	console.log("Title: ", itemData.title);
	console.log("Status: ", itemData.status);
	console.log("Partner: ", itemData.partner);
	console.log("Owner: ", itemData._owner);
	console.log("ID: ", itemData._id);
	console.log("Index: ", index);
});